html - 文本区域下的额外填充

Question

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

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

任何输入(双关)将不胜感激:)

Answer 1

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

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

(在你的 fiddle 中测试，有效)

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

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

关于它为何如此工作的更多信息: Mystery white space underneath image tag