3

以我的经验，为了让我的许多元素的项目正确地承认他们孩子的边距，我不得不对其应用微不足道的填充。例如：

<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/

在此示例中，第 2 部分是具有预期效果的部分，但实现它的方法是……愚蠢的。为什么会发生这种情况，有什么方法可以在语义上实现我想要的效果？

4

2 回答 2

1

使用浮点数时，这种行为始终是罪魁祸首。通常，我不会添加任何“难以察觉的”填充，因为我希望浏览器在您可能不希望出现这种情况时四舍五入并添加 1px。相反，我margin-bottom不惜一切代价避免。左边距和右边距不会引起问题。如果 margin-top 不起作用，我会向父 div 添加填充或使用其他一些解决方法。

我知道这并不能深入了解内部运作，但上面描述的策略就像一个魅力还没有让我失望。

更新

这种行为称为边距折叠，在某些特定情况下仅发生在顶部和底部边距；它不影响内联元素。

这种效果源自使用折叠边距的 Netscape 3。虽然违反直觉，但规格已更改为遵循网景在那些“黑暗时代”提出的（较差的）标准。请注意，这是怪癖模式或正在发生的一些巫术魔术。这实际上部分由规范定义。

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

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

希望这能给你更多的见解。搜索谷歌了解更多。

于 2013-06-13T21:46:36.153 回答
1

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

于 2013-06-13T21:53:23.350 回答