文本区域下的额外填充答案

【问题标题】：Extra padding under text area文本区域下的额外填充
【发布时间】：2012-10-20 18:12:49
【问题描述】：

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

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

.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; }

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

【问题讨论】：

.field 有填充：10px。删除它
如果你更好地格式化和组织你的css，这种事情会更容易被发现。
您要删除文本区域下方的填充，还是文本区域内部的填充？
我说的是输入框和灰色容器框之间的空间底部比顶部大。
Extra space under textarea, differs along browsers的可能重复

标签： html css

【解决方案1】：

要跨浏览器在文本区域/输入字段下方没有空格，请使用：

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

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

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

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

有关它为何如此有效的更多信息： Mystery white space underneath image tag

【讨论】：

【解决方案2】：

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

DEMO

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

是的，即使 vertical-align: bottom 也可以。

DEMO 2

【讨论】：

+1 此解决方案有效。稍微解释一下就好了:)
我的解决方案也很有效，而且在我看来更加微妙，并且破坏页面中其他任何内容的机会更少（没有）。关于浮动为什么起作用：浮动有成为具有一组特殊规则的块元素的习惯。在这种情况下，将其设置为 display:block 也可以。这只是丑陋的。并且 display:block 有效，因为块元素不像内联元素那样具有行高的空白。简而言之，这是很长的路要走。
对长 cmets 感到抱歉：我并不是说您不应该在这里使用任何浮点数。这不是删除文本区域底部添加的空白的最佳通用解决方案。

【解决方案3】：

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

如果您指的是文本区域中的填充：在 .field 类中设置填充 = 0px

【讨论】：

它应该是4px，但它在底部更多。我希望它在底部不超过 4px。
是的，在 chrome 中我发现了不同之处。但是 Mozilla 正确显示它