3

По умолчанию label возле textarea принимает значение vertical-align: baseine. То есть label выравнивается относительно базовой линии родительского элемента. В данном случае родительским элементом является fieldset. Где у этого родителя базовая линия? Почему текст прижимается книзу?

Разве базовая линия есть НЕ только у текста?

body {
  font-family: sans-serif;
}

legend {
  text-transform: uppercase;
  background: #f7e8f7;
}

fieldset {
  border: 3px solid purple;
  background: #f7e8f7;
}

textarea {
  resize: none;
}
<form action="#">
  <fieldset>
    <legend>Information</legend>
    <label for="1">Comment here:</label> <textarea name="comment" id="1" cols="" rows=""></textarea>
  </fieldset>
</form>

2
  • Базовая линия элемента совпадает с базовой линией текста. Где текст располагается - туда и прижимается
    – andreymal
    5 авг 2020 в 16:25
  • Правда, с textarea ситуация более сложная, у него базовая линия стандартом не определена
    – andreymal
    5 авг 2020 в 16:44

1 ответ 1

6

Свойство vertical-align применимо только к inline, inline-block, и table-cell элементам. Соотвественно "baseline", о котором Вы спрашиваете присутствует только у них.

Оно не применимо к блочным элемента, т.ч таким как textarea.

Перечисленные выше элементы будут занимать позицию исходя из своих дефолных настроек (если не задано другого) внутри их родительского элемента.

т.е они встанут там где должны относительно высоты родителя.

2
  • Хорошо, НО если родителем для label является fieldset, почему тогда текст выравнивается относительно textarea?
    – Eva
    7 авг 2020 в 9:47
  • @Eva текст выравниваеться относительно свободного места по высоте в родителе (fieldset) а не относительно textarea. В Вашем примере textarea это самый высокий элементы в fieldset, поэтому может создастся ощущение что он выровнен относительно него, но это не так.
    – Vasily
    7 авг 2020 в 10:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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