为什么我的textarea比邻居更高？

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

为什么我的textarea比邻居更高？

不是.

让我解释.

首先,一点背景:

你span和textarea要素(默认),内联元素.

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

了解下降者......

看看这一行文字.请注意,没有任何字母违反基线.

现在看下面这句话:

通过过桥,他可能已经离开了.

注意字母"y","j","p"和"g".这些字母突破了基线,在排版中称为" 下降 ".

[

^{来源:Wikipedia.org}

你看到的差距不是边距或填充,而只是浏览器提供容纳这些小写字母的空间.简而言之,这称为基线对齐.

底线

大多数字母"坐"的线和下方延伸的线.

[

^{来源:Wikipedia.org}

那么,为什么,有人可能会问,没有浏览器提供这个空间textarea,img,input和其它内联元素,不需要为下伸的空间？

因为浏览器会调整您在同一行上的某个元素之前或之后可能有文本的可能性.

现在,您的图像和代码......

乍一看,它显然textarea比span元素更高.但如果你仔细看看......

......你会发现它们完全一致.双方span并textarea针对伸提供空间.

您添加的边框会导致未对齐的外观,因为textarea边框包含一个清晰描绘的框,同时排除了下降空间,但span边框包裹文本和下降空间.如果删除红色边框,则不对齐不太明显.

就解决方案而言,这里有两个选项:

1. 添加vertical-align: bottom到textarea规则,或
2. 添加display: block到textarea规则.