Что такое базовая линия элемента?

Question

По умолчанию 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>

Answer 1

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

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

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

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

БЛОГ НА HUSL

Что такое базовая линия элемента?

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