Question

我在这里有一个简单的按钮：http://jsfiddle.net/u6t5A/

如果您在“计算样式”选项卡中查看Firebug，您将看到高度为24px，但引用的CSS规则是一个说明高度：30px（请参见此处的快照：http://twitpic.com/dfwp8j）< / p>

有人能告诉我为什么显示按钮的高度不是30px（在CSS中指定），而是它的24px？

是否与线高有关？或者可能使用内联块？

这是代码：

HTML：

<button>Bla bla bla</button>

CSS：

body, td, th {
    font-size: small;
}

button {
    display: inline-block;

    margin: 0 0.7em 0 0;
    padding: 0px 5px 4px 5px;

    height: 30px;

    border: 1px solid #dedede;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bfbfbf;

    background-color: #e9e9e9;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
    background: -webkit-linear-gradient(top, #fff, #e9e9e9);
    background: -moz-linear-gradient(top, #fff, #e9e9e9);
    background: -ms-linear-gradient(top, #fff, #e9e9e9);
    background: -o-linear-gradient(top, #fff, #e9e9e9);

    font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
    font-weight: bold;
    font-size: 100%;

    line-height: 130%;

    color: #464646;
    cursor: pointer;
    text-decoration: none;

    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
}

Answer 1

高度包括填充和边框，为此目的是6（每个顶部和底部边框1px和底部填充4px。30 - 6 = 24px

Answer 2

索林，

padding-bottom（4px）+ border-top（1px）+ border-bottom（1px）= 6px

6px - 身高（30px）= 24px

所以，增加按钮的高度：

button { height: 36px; }

Answer 3

在CSS框模型之后，元素的大小为height + padding + border。如果您在示例中有以下css：

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

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

现在，如果你看一下按钮的大小（至少是什么萤火虫说），那就完全正确了：你说的高度（30px）减去填充量减去边界。

按钮的行为就像您明确给出了box-sizing属性border-box值一样。这意味着元素的外部宽度将是您定义的高度，但内部高度将是外部高度减去填充和边框。现在，如果您在content-box属性上为该按钮指定box-sizing值，则会再次添加填充和边框。

但请注意;您的按钮实际上是30像素高，但只有内容的内部高度较少（24px）。

Answer 4

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

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

4 个答案: