更新

Question

根据我的经验，为了让我的许多元素的项目能够正确地承认他们孩子的边缘，我不得不对它进行不知不觉的少量填充。例如：

<style type="text/css">
    :root {
        border: 1px solid #000;
        font-family: sans-serif;
    }
    body>div {
        outline: 1px solid #00F;
    }
    div>div {
        margin: 1em;
        outline: 1px solid #0F0;
    }

    #div1 {
        padding: 0;
    }
    #div2 {
        padding: 0.05px;
    }
    #div3 {
        padding: 10px;
    }
</style>

<div id="div1"><div>Div 1 (parent without padding)</div></div>
<div id="div2"><div>Div 2 (parent with imperceptible padding)</div></div>
<div id="div3"><div>Div 3 (parent with visible padding)</div></div>

基本上呈现为

┌───────────────────────────────────────────────────────────────────────────────┐
│                                                                               │
│┌─┬─────────────────────────────────────────────────────────────────────────┬─┐│
││ │Div 1 (parent without padding)                                           │ ││
│└─┴─────────────────────────────────────────────────────────────────────────┴─┘│
│                                                                               │
│┌─────────────────────────────────────────────────────────────────────────────┐│
││ ┌─────────────────────────────────────────────────────────────────────────┐ ││
││ │Div 2 (parent with imperceptible padding)                                │ ││
││ └─────────────────────────────────────────────────────────────────────────┘ ││
│└─────────────────────────────────────────────────────────────────────────────┘│
│┌─────────────────────────────────────────────────────────────────────────────┐│
││                                                                             ││
││  ┌───────────────────────────────────────────────────────────────────────┐  ││
││  │Div 3 (parent with visible padding)                                    │  ││
││  └───────────────────────────────────────────────────────────────────────┘  ││
││                                                                             ││
│└─────────────────────────────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────────────────────────────┘

http://jsfiddle.net/Q4WqJ/

在这个例子中，Div 2是具有预期效果的那个，但实现它的手段是......愚蠢的。 为什么会发生这种情况，是否有任何方法可以达到我在语义上更有效的效果？

Answer 1

使用浮动时，此行为始终是罪魁祸首。通常，我不添加任何“难以察觉”的填充，因为我希望浏览器向上舍入并添加1px，而您可能不打算这样。相反，我不惜一切代价避免margin-bottom。保证金左翼和保证金权利不会引起问题。如果margin-top不起作用，我会向父div添加填充或使用其他类型的工作。

我知道这对内部运作没有多少洞察力，但上面描述的策略就像魅力还没有让我失望。

更新

此行为称为 margin-collapsing ，仅在某些特定情况下发生在上边距和下边距;它不会影响内联元素。

此效果源自使用折叠边距的Netscape 3。虽然违反规范，但规格改变为遵循netscape在那些“黑暗时代”中提出的（差）标准。请注意，这是怪癖模式或某些伏都教魔法发生。这实际上部分是由规范定义的。

保证金崩溃将占用所有可能保证金的最大值。因此，在您的情况下，父div没有上边距，因此内部div（具有较大的上边距）生效。添加填充会更改此行为，因为填充会取消最大计算中使用边距的连续性。

更改显示类型是另一种方法。例如display: table，因为与15年前不同，CSS能够定义规范而不是采用预先存在的规范。

希望这会给你更多的洞察力。搜索谷歌了解更多。

Answer 2

尝试给予overflow: auto;。此外，这个链接可能解释了原因。 http://reference.sitepoint.com/css/collapsingmargins

为什么元素会在基于父母填充的忽略和确认边距之间跳跃？

2 个答案:

更新