Question

为什么填充在a和button元素之间的计算方式不同？

HTML

<button type="button">CLICK</button>
<a href="#">LINK</a>

CSS

button {
    padding: 10px;
    height: 30px;
    border: 0;
    background: #ccc;
    line-height: 30px;
}

a {
    display: inline-block;
    padding: 10px;
    height: 30px;
    background: #ccc;
    line-height: 30px;
}

Answer 1

Chrome（和Firefox）中按钮的默认box-sizing值为border-box：

enter image description here

DEMO

即。元素的总高度（包括填充（和边框和边距））为30px，而不是链接的50px。您可以通过设置

来解决此问题

box-sizing: content-box;

明确。

DEMO

More info about the box model.

为什么border-box是我不能说的默认值。我还没有找到它的规格。 Chrome，Firefox和Safari似乎都是这样做的（没有测试其他浏览器）。

Answer 2

<a href...>

链接永远不会有设置高度，如果你检查html，你可以看到;真正做的是给它一个行高和填充。当你写height: 30px时，它是没用的。

关于这一点，你定义了<button>的高度，这就是为什么它与你设置链接的方式看起来不一样

Here is a fiddle通过删除<button>

的设置高度来说明如何使它们相同

为什么填充在<a> and <button> elements?</button></a>之间的计算方式不同

2 个答案: