Почему мой текст выше, чем его сосед?

Фото:

.left {
  border: 1px solid red;
}
textarea {
  border: 1px solid blue;
}
.parent {
  border: 1px solid green;
}

<div class='parent'>
    <span class='left'>
        <span>one</span>
        <span>two</span>
     </span>
     <textarea></textarea>
</div>

Ответ 1

Почему мой textarea выше, чем его сосед?

Это не так.

Позвольте мне объяснить.

Сначала немного фона:

Элементы span и textarea (по умолчанию) встроенные элементы.

Браузеры обычно предоставляют немного пробелов под встроенными элементами для descenders.

Чтобы понять descenders...

Посмотрите на эту строку текста. Обратите внимание, что нет букв, которые нарушают базовую линию.

Теперь рассмотрим следующее предложение:

Просто пересекая мост, он, вероятно, ушел.

Обратите внимание на буквы "y", "j", "p" и "g". Эти буквы нарушают baseline и известны в типографии как " спусковые".

[

^{Источник: Wikipedia.org}

Разница, которую вы видите, - это не маржа или отступы, а просто браузер, предоставляющий комнату для размещения этих строчных букв. Короче говоря, это называется выравнивание базовой линии.

базовый

Линия, на которой большинство букв "сидят" и ниже которых расширяются ограничители.

[

^{Источник: Wikipedia.org}

Итак, почему кто-нибудь может спросить, предоставляет ли браузер это пространство для textarea, img, input и других встроенных элементов, которым не нужно пространство для descenders?

Поскольку браузер настраивается на то, что вы можете иметь текст до или после одного из этих элементов в одной строке.

Теперь, к вашему изображению и коду...

На первый взгляд ясно, что textarea выше, чем элемент span. Но если вы посмотрите подробнее...

... вы увидите, что они полностью выровнены. Оба span и textarea предоставляют пространство для descenders.

Добавленные границы вносят вклад в появление несоосности, поскольку граница textarea обертывает четко очерченную рамку, исключая пространство descender, но граница span обтекает текст и пространство дескриптора. Если вы удалите красную рамку, смещение будет менее выраженным.

В терминах решения есть два варианта:

Добавьте vertical-align: bottom в правило textarea, OR
Добавьте display: block в правило textarea.

Ответ 2

Адам,

Если вы добавите следующее в существующий css, вы должны получить желаемые результаты.

.left{
    display:inline-block;
    vertical-align: text-bottom;
}

textarea{
    margin:0px;
    vertical-align: text-bottom;
}

Вы можете увидеть рабочий пример по следующему URL: https://jsfiddle.net/YOOOEE/z8pwpms6/

Ответ 3

Если у вас есть два элемента span, высокий уровень будет таким же. Пробелы имеют отображение: inline; по умолчанию.

<span class="left">
    <span>one</span>
    <span>two</span>
  </span>
<span class="right">
    <span>one</span>
    <span>two</span>
 </span>

У всех браузеров есть стили по умолчанию для текстовых областей:

textarea {
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
input, textarea, keygen, select, button {
    margin: 0em;
    font: 13.3333px Arial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

Мое решение:

.parent {
  border: 1px solid green;
  display: flex;
}