爲什麼我的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; 
}