html - 为什么我的文本区域比它的邻居高？

Question

图片:

.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>

Codepen

Answer 1

Why is my textarea higher up than its neighbor?

不是。

让我解释一下。

首先，一些背景知识:

您的 span 和 textarea 元素(默认情况下)是 inline elements .

浏览器通常在内联元素下方为 descenders 提供一点空白。

理解后代......

Look at this line of text. Notice there are no letters that breach the baseline.

现在看下面的句子:

By just crossing the bridge he probably got away.

注意字母“y”、“j”、“p”和“g”。这些信件违反了 baseline在字体排版中称为“descenders”。

[

^{来源:Wikipedia.org}

您看到的差距不是边距或填充，而只是浏览器提供的空间来容纳这些小写字母。简而言之，这叫做baseline alignment .

baseline

The line upon which most letters "sit" and below which descenders extend.

[

^{Source: Wikipedia.org}

那么，为什么有人会问，浏览器是否为 textarea、img、input 和其他内联元素提供了这个空间，这些元素不需要下行空间吗？

因为浏览器会针对同一行中其中一个元素之前或之后可能有文本的可能性进行调整。

现在，您的图片和代码...

乍一看，textarea 明显高于 span 元素。但是如果你仔细看看......

...您会看到它们完全对齐。 span 和 textarea 都为 descenders 提供了空间。

您添加的边框会导致出现错位，因为 textarea 边框包围了一个清晰划定的框，同时排除了下行空间，但是 span 边框包裹文本和下行空间。如果您删除红色边框，则错位就不那么明显了。

就解决方案而言，这里有两种选择:

1. 将vertical-align: bottom 添加到textarea 规则，或者
2. 将display: block 添加到textarea 规则。