为什么我的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元素（默认）inline elements。

浏览器通常在内联元素下面为下行者提供一点空白。

要了解伸...

看这行文字。请注意，没有违反基准的字母。

现在来看看下面的句子：

通过刚刚越过他可能逃走的桥梁。

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

[

^{来源：Wikipedia.org}

你看到的差距不是保证金或填充，而只是提供空间来容纳这些小写字母浏览器。总之，这叫做baseline alignment。

baseline

在大多数字母“坐”而在其下面伸延长线。

[

^{来源：Wikipedia.org}

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

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

，你的形象和代码...

乍一看它清楚地看到，textarea达比span元素较高。但是，如果你仔细看看...

...你会看到他们是完全对齐。 span和textarea都为下行提供了空间。

您添加，因为textarea边境线明确描述的箱子，同时排除伸空间有助于错位外观的边界，但span边框环绕文字和下降装置空间 。如果删除红色边框，则不对齐不明显。

在解决方案方面，这里有两种选择：

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

Answer 2

亚当，

如果你添加以下到您现有的CSS，你应该得到你想要的结果。

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

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

您可以在以下网址看到一个工作示例：https://jsfiddle.net/YOOOEE/z8pwpms6/

Answer 3

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

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