Question

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

E.g：

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

div将比textarea高几个像素。

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

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

Answer 1

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

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

Updated Example

block

Updated Example

textarea {
  vertical-align: top;
}

Answer 2

将display:block添加到textarea元素。

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

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

Jsfiddle

Answer 3

将display:block;添加到textarea

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

  <%= form_for([@school,@teacher]) do |f| %>

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

让我知道我还能做些什么。

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

4 个答案: