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元素（默认情况下）为inline elements。

浏览器通常会为下行程序的内联元素下方提供一些空格。

了解下降者......

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

现在看下面这句话：

过桥时他可能已经离开了。

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

[ enter image description here

^{来源：Wikipedia.org}

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

baseline

大多数字母“坐”的线和下方延伸的线。

[

^{来源：Wikipedia.org}

那么，有人可能会问，为什么浏览器会为textarea，img，input以及其他内联元素提供这个空间，这些元素不需要空间用于下行程序？

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

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

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

......你会发现它们完全一致。 span和textarea都为下行者提供了空间。

您添加的边框会导致错位的出现，因为textarea边框在排除下行空间时包裹了一个明确描述的框，但span边框包裹了text 和下降空间。如果删除红色边框，则不对齐不太明显。

就解决方案而言，这里有两个选项：

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

Answer 2

亚当，

如果您将以下内容添加到现有的CSS中，您应该会得到所需的结果。

NewGlobalRef

您可以在以下网址上看到一个有效的示例：https://jsfiddle.net/YOOOEE/z8pwpms6/

Answer 3

如果你有两个span元素，则high将是相同的。跨度显示：内联;默认情况下。

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

所有浏览器都有textareas的默认样式：

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;
}

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

3 个答案: