textarea 下的额外空间，因浏览器而异
Posted
技术标签:
【中文标题】textarea 下的额外空间，因浏览器而异【英文标题】：Extra space under textarea, differs along browsers 【发布时间】：2011-10-31 23:18:27 【问题描述】：textarea 标签下有一些额外的空间。在不同的浏览器中从 1 到 4 像素。标记很简单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
body
margin: 0;
padding: 0;
.main
background-color: red;
textarea
background-color: gray;
resize: none;
margin: 0;
border: 0 none;
padding: 10px;
height: 50px;
overflow: hidden;
</style>
</head>
<body>
<div class="main">
<textarea></textarea>
</div>
</body>
</html>
这是它在浏览器中的呈现方式：
为什么会这样？如何删除这个多余的空间？
【问题讨论】：
【参考方案1】：将vertical-align: top 添加到textarea。
产生间隙的原因是textarea是inline（或inline-block）元素，而间隙是文本中为descenders保留的空间。我不知道为什么不同浏览器之间的差距是不同的。
【讨论】：
生孩子 当几百个人和我有同样的问题时，我总是觉得很有效，?。 十年后。这仍然是一件事。【参考方案2】：在我的例子中，thirtydot 的回答不适用于父 <div> 的底部边框。
display: block 不过很适合我。
【讨论】：
【参考方案3】：我还发现如果 textarea 的父级使用 display:flex，空间会消失：
/* The relevant part: */
#FlexLayout display: flex; flex-direction: column;
/* The boring part: */
.ShowChildBorders * border: 1px solid;
#DefaultLayout * border-color: red;
#FlexLayout * border-color: green;
#SideBySide display: flex;
#SideBySide > div flex: 1; margin: 4px;
#SideBySide * margin: 0; padding: 0; <div id="SideBySide">
<div class="ShowChildBorders">
<div id="DefaultLayout">
<div>Default Layout</div>
<textarea>Text Area</textarea><br/>
<textarea>Text Area</textarea>
</div>
</div>
<div class="ShowChildBorders">
<div id="FlexLayout">
<div>Flexbox Layout</div>
<textarea>Text Area</textarea>
<textarea>Text Area</textarea>
</div>
</div>
</div>在 Chrome 91.0.4472.77、Windows 10 64 位上，呈现为：
【讨论】：
以上是关于textarea 下的额外空间，因浏览器而异的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot MultipartFile 上传 getOriginalFileName 因浏览器而异
取消chrome浏览器下input和textarea的默认样式