10

我的文本区域下面有额外的填充，但我似乎找不到它的来源。我已将各个代码放在此页面上：

http://jsfiddle.net/wfuks/

我似乎无法找到它的来源。它有类“字段”：

.field { background-color: white; width: 430px; padding: 10px; font-family:arial, sans-serif; border: 1px solid #CCC; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

任何输入（双关语）将不胜感激:)

4

3 回答 3

22

要让跨浏览器在 textarea/input 字段下方没有空格，请使用：

textarea,
input,
select {
  margin: 0;
  vertical-align: bottom;
}

（在你的小提琴中测试，有效）

奇怪的是，垂直对齐是这里的关键。

请注意，您不需要 margin:0 因为您已经拥有*{margin:0}. 对于 textarea 的更完整的跨浏览器体验，您还可以将overflow:auto;其用于 IE 和resize:none;支持调整大小的浏览器。

有关它为何如此有效的更多信息： 图像标签下的神秘空白

于 2012-10-31T10:16:05.400 回答
1

添加overflow:auto到.field_box和float:right到textarea

演示

在您的代码中有float:left标签，在这种情况下，正确的元素应该具有正确的浮动以填充可用的确切空间。否则你可以删除浮动并通过使用display:table-row和来实现这一点table-cell

是的，甚至vertical-align: bottom可以工作。

演示 2

于 2012-10-31T10:13:18.780 回答
0

据我了解，您的意思是div class= 'field_box'. 0px在此类中进行填充以删除文本区域下的空间。

如果您指的是文本区域中的填充：make padding= 0px in class.field

于 2012-10-31T10:17:29.747 回答