textarea無法解釋的間距

Question

我剛剛注意到textarea下面有一些有線間距，它在每個瀏覽器中都有所不同。有人可以解釋爲什麼它在那裏？

span, 
 
textarea { 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<textarea></textarea> 
 
<span>test</span>

Answer 1

添加

vertical-align:bottom

這是因爲

一些替換元素的基線，像<textarea>，不是由HTML規範規定的，這意味着它們與該關鍵字行爲可​​以從一個瀏覽器改變到另一個。

^{MDN Reference}

span, 
 
textarea { 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: bottom; 
 
}

<textarea></textarea> 
 
<span>test</span>

Answer 2

這個樣式添加到textarea的

vertical-align: top 

Answer 3

在HTML與textarea的事情是，在文本旁邊的底部邊緣對齊。如果您希望以其他方式使用它，請閱讀CSS中的vertical-align屬性。

您可以使用：

span, 
 
textarea { 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
}

<textarea></textarea> 
 
<span>test</span>

Answer 4

添加vertical-align:頂部textarea。

缺口的原因是textarea是內聯（或內嵌塊）元素，缺口是文本中爲descenders保留的空間。

span, 
 
textarea { 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
textarea{ 
 
    vertical-align:top; 
 
}

<textarea></textarea> 
 
<span>test</span>