小垫，大差 [英] Small padding, big difference

问题描述

如果我只在标题周围添加一个1像素的边距，那么这显然是一个巨大的区别（ http://jsfiddle.net/ 68LgP / ）。

If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).

html：

<div class="pad0">
    <h1>Text</h1>
</div>
<div class="pad1">
    <h1>Text</h1>
</div>

css：

.pad0 {
    background-color: #E9E9E9;
    padding: 0px;
}
.pad1 {
    background-color: #E9E9E9;
    padding: 1px;
}

为什么会这样？我真的想实现类似的效果，1px填充，但没有额外的填充添加。

Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.

推荐答案

利润损失

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的最大边距，这种行为称为边距折叠。

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

您可以在 w3c site 。

当且仅当 [...]没有线框，无间隙， [...]

Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]

因此，如果您应用 padding-top （ 1px 就够了），就像在第二个例子中一样，边距不再折叠。一个简单的解决方案，如已经建议的，是删除您的标题元素的默认边距。

So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements.

这篇关于小垫，大差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！