Почему label для textarea отображается не сверху, а внизу?

Question

body {
  font-family: sans-serif;
}

fieldset {
  border: 4px solid green;
}

legend {
  background: yellow;
}

textarea {
  resize: none;
}

<form action="#">
  <fieldset>
    <legend>Личная информация</legend>
    <label for="1">Имя</label><input title="Введите свое имя" id="1" type="text" name="name"> <br>
    <label for="2">Email</label> <input id="2" type="email"> <br>
    <label for="3">Пароль</label> <input id="3" type="password">
    <br>
    <br>
    <label for="4">О себе </label> <textarea name="comment" id="4" cols="" rows=""></textarea>
  </fieldset>
</form>

Answer 1

Я уже расписывал это момент более подробно в вопросе Логика размещения дочерних блоков в HTML/CSS

Все дело в свойстве vertical-align, для inline элементов значение которого по умолчанию равняется "baseline".

Именно поэтому Вы видите что элемент label выровнен по нижнему краю относительно textarea.

Сейчас выровнено по верхнему краю:

body {
  font-family: sans-serif;
}

fieldset {
  border: 4px solid green;
}

legend {
  background: yellow;
}

label {
  vertical-align: top;
}

textarea {
  resize: none;
}

<form action="#">
  <fieldset>
    <legend>Личная информация</legend>
    <label for="1">Имя</label><input title="Введите свое имя" id="1" type="text" name="name"> <br>
    <label for="2">Email</label> <input id="2" type="email"> <br>
    <label for="3">Пароль</label> <input id="3" type="password">
    <br>
    <br>
    <label for="4">О себе </label> <textarea name="comment" id="4" cols="" rows=""></textarea>
  </fieldset>
</form>

БЛОГ НА HUSL

Почему label для textarea отображается не сверху, а внизу?

Ответы (1 шт):