如何删除textarea下面的几个像素的空白？答案

【问题标题】：How to remove few pixels of whitespace underneath textarea?如何删除textarea下面的几个像素的空白？
【发布时间】：2015-11-24 23:13:52
【问题描述】：

每当我有一个 textarea 的包装器时，textarea 的高度与 textarea 的高度不匹配。底部有几个像素的边距。为什么会发生这种情况，我该如何解决？

例如：

<div>
    <textarea></textarea>
</div>

div 将比 textarea 高几个像素。

这是一个小提琴： http://jsfiddle.net/0dgjqp3b/

我不想明确设置父级的高度。即使 textarea 调整大小，父级也应环绕 textarea。

【问题讨论】：

Why is my textarea higher up than it's neighbor?的可能重复
也相关：stackoverflow.com/a/31445364/3597276

标签： html css

【解决方案1】：

这是因为textarea 元素的display 是inline-block by default。结果，它的vertical-align 属性设置为baseline（这就是为什么它没有像您期望的那样对齐）。之所以有reserved space at the bottom，是因为'y'或'j'之类的字母挂在相邻的字母/元素下方。

要解决此问题，您可以将vertical-align 属性值更改为top 之类的值，也可以将textarea 的display 更改为block：

Updated Example

textarea {
  vertical-align: top;
}

Updated Example

textarea {
  display: block;
}

【讨论】：

【解决方案2】：

将display:block; 添加到textarea

div {
  border: 1px solid red;
}
textarea {
  margin: 0;
  padding: 0;
  display: block;
}

<div>
  <textarea></textarea>
</div>

【讨论】：

【解决方案3】：

将display:block 添加到textarea 元素。

div {
  border: 1px solid red;
}
textarea {
  margin: 0;
  padding: 0;
  display: block;
}

<div>
  <textarea></textarea>
</div>

Jsfiddle

【讨论】：

@Linksku 你的浏览器版本是多少？

【解决方案4】：

我的答案使用了之前答案中的大部分代码，但添加了一个新内容。

div{border:1px solid red;display:table;vertical-align:middle;}
textarea{margin:0;padding:0;vertical-align:middle;}

<div>
    <textarea></textarea>
</div>

如果还有什么我可以做的，请告诉我。

【讨论】：