4

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>

1 ответ 1

8

Я уже расписывал это момент более подробно в вопросе Логика размещения дочерних блоков в 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>

1
  • Большое спасибо!
    – Eva
    5 авг 2020 в 10:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.