CSS 高度：20px + padding-bottom：3px = 20px？答案

【问题标题】：CSS Height: 20px + padding-bottom: 3px = 20px?CSS 高度：20px + padding-bottom：3px = 20px？
【发布时间】：2011-08-30 00:54:56
【问题描述】：

我在使用 Firefox 时遇到 css 高度问题。

我在我的页面上输入了type="submit" 和height:20px, padding-bottom:3px. 所以萤火虫显示按钮有height 17px和padding-bottom: 3px所以总高度是20px而不是23px。

谁能帮我弄清楚这是firefox还是firebug的问题？

这里是链接http://jsfiddle.net/tKZ5Y/ 您可以使用 Firebug 检查呈现的提交按钮

【问题讨论】：

【解决方案1】：

填充是包含在 inside 框中的“边距”。边距在外框。

<input> 内的填充将简单地对齐输入内的文本。如果你使用 padding-top 和 padding-bottom 10px 和 text 10px 那么文本将在 30px 容器的中间。

另外请注意，Firefox 在提交输入中放置的文本比所有其他浏览器都要低一些。不过有一个修复方法。

【讨论】：

【解决方案2】：

填充对按钮（和大多数表单域）的作用不同。填充包含在宽度和高度中（除非宽度是动态的（即按钮的默认值），然后填充添加到宽度中）。

我只是在 Firefox、IE、Chrome 和 Opera 中使用 tested this，而且它在所有方面都是一致的。

唯一的区别是，当文本的高度变小时，Opera 的反应会有所不同，即垂直居中而不是放置在顶部填充下方。

【讨论】：

【解决方案3】：

使用边距代替填充.. 在元素内容内设置填充边距被扩展

【讨论】：

【解决方案4】：

这不是问题，这是输入组件的正常行为

【讨论】：

【解决方案5】：

PPK says it's a bug。当我向按钮声明padding-bottom 时，Chrome 似乎没有任何反应，所以......我不知道。我想，最重要的是，您可以（至少）在 Firefox 和 Opera 中解决这个问题：

input[type=submit] {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

【讨论】：

【解决方案6】：

<input type="submit"> 在 Gecko 的 UA 样式表中的样式为 -moz-box-sizing: border-box，用于网站兼容性。如果您想要非默认行为，请相应地调整 box-sizing 样式。

【讨论】：