.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>爲什麼我的textarea的上漲比它的鄰居？
不是。
讓我解釋一下。
首先，有點背景：
你span和textarea元素（默認）inline elements。
瀏覽器通常在內聯元素下面爲下行者提供一點空白。
要了解伸...
看這行文字。請注意，沒有違反基準的字母。
現在來看看下面的句子：
通過剛剛越過他可能逃走的橋樑。
請注意字母「y」，「j」，「p」和「g」。這些字母違反了baseline，在排版中被稱爲「descenders」。
[
你看到的差距不是保證金或填充，而只是提供空間來容納這些小寫字母瀏覽器。總之，這叫做baseline alignment。
在大多數字母「坐」而在其下面伸延長線。
[
那麼，爲什麼，有人可能會問，是否該瀏覽器textarea提供這個空間，img，input和其他內聯元素，不需要下行者的空間？
因爲瀏覽器會調整您在同一行中的某個元素之前或之後可能有文本的可能性。現在
，你的形象和代碼...
乍一看它清楚地看到，textarea達比span元素較高。但是，如果你仔細看看...
...你會看到他們是完全對齊。 span和textarea都爲下行提供了空間。
您添加，因爲textarea邊境線明確描述的箱子，同時排除伸空間有助於錯位外觀的邊界，但span邊框環繞文字和下降裝置空間 。如果刪除紅色邊框，則不對齊不明顯。
在解決方案方面，這裏有兩種選擇：
vertical-align: bottom到textarea規則或display: block到textarea規則。亞當，
如果你添加以下到您現有的CSS，你應該得到你想要的結果。
.left{
display:inline-block;
vertical-align: text-bottom;
}
textarea{
margin:0px;
vertical-align: text-bottom;
}
您可以在以下網址看到一個工作示例：https://jsfiddle.net/YOOOEE/z8pwpms6/
1）這是有效的，但唯一必要的改變是'textarea {vertical-align：text-bottom; }'。其餘是無關的。特別是'textarea'的默認邊距是'0px'。 2）我認爲一個完整的答案將解決「爲什麼」，而不僅僅是「修復」。 IE瀏覽器。 user1843159在關於基線的評論中說了些什麼。 –
@AdamZerner在我看來，需要在Firefox上使用'margin：0'來對齊兩個邊框，而不是在Chrome中。 – Zimmi
@AdamZerner每個瀏覽器都有自己的元素默認樣式，這些樣式對於不同的HTML元素並不總是相同的。與用戶「Zimmi」一樣，你可能只需要某些特定瀏覽器的樣式。這就是爲什麼它也建議使用像[normalize.css]（https://necolas.github.io/normalize.css/）在大多數瀏覽器中具有相同的基本風格... –
如果你有兩個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;
}
夢幻般的答案- 謝謝！ –
OMG最佳答案我已閱讀...但是，這裏有一個問題..如果你有一個div ..和文本是「新」...沒有下行...但是，你可以清楚地看到一個區別下降者的空間......有沒有一種方法可以對文本進行「縮小包裝」。順便說一句，這是一個只有文本的div ......不是內部跨度或任何東西。 – carinlynchin
@carinlynchin，嘗試使用'行高'屬性... https://stackoverflow.com/q/45112764/3597276 –