按钮高度小于CSS中指定的高度

我这里有一个简单的按钮：

如果您在Firebug的“计算样式”选项卡中查看，您将看到高度为24px，但引用的CSS规则是说明高度为30px的规则。请参见此处的快照：

谁能告诉我为什么显示的按钮的高度不是CSS中指定的30px，而是24px

这和线的高度有关吗？或者使用内联块

代码如下：

HTML:

---

我赞赏你尝试动态，但坚持用页面布局做动态的事情。您正在使用百分比和其他相对值，例如em作为值。如果需要像素精度，则需要使用像素px值。当您在任何Linux机器上打开该内容时，您的方法会变得更加主观。

高度包括填充和边框，就这些目的而言，每个顶部和底部边框为6 1px，底部填充为4 px。30-6=24pxSorin

填充底部4px+边框顶部1px+边框底部1px=6px

6px-高度30px=24px

因此，增加按钮的高度：

button { height: 36px; }

---

按照CSS框模型，元素的大小是高度+填充+边框。如果示例中有以下css：

.my-element { height: 10px; padding: 2px; border: 2px solid #000; }

它的总高度是10+2*2+2*2=18px。2*2，因为必须在顶部和底部添加填充，并在顶部和底部添加边框

现在，如果你看看你的按钮的大小，至少firebug说的是，那是完全正确的：你说的30px的高度减去填充物，减去边框

按钮的行为就像您显式地将边框框值指定给框大小属性一样。这意味着元素的外部宽度将是您定义的高度，但内部高度将是外部高度减去填充和边框。现在，如果在框大小属性中为按钮指定内容框值，它将再次添加填充和边框

---

但请注意；你的按钮实际上是30像素高，但只有内容的内部高度小于24像素，也就是说。

我在firefox中计算的高度是30像素。我在firefox、safari和chrome中检查，我的高度是30像素谢谢大家的回答。我知道盒子的尺寸，但让我困惑的是为什么Firebug显示高度：24，然后规则显示高度：30。它应该显示像contentHeight:24或innerHeight:24之类的内容。。。这让我想到，还有一些其他规则，比如线条高度或内联块，会以某种方式影响高度；但我试着轮流移除，但没有成功

button { height: 36px; }

.my-element { height: 10px; padding: 2px; border: 2px solid #000; }