Question

根据下面的CSS，有谁知道为什么我没有在第一个div中获得最高利润？这在Mac OSX Lion上运行的Chrome，Safari和Firefox 4中呈现相同的效果（在Snow Leopard中呈现相同的效果）。我希望第一个项目在内部div周围显示5px边距（显然除了底部），而不仅仅是在右边和左边。为什么保证金不适用于顶部？即使我在CSS中指定margin-top：5px，它仍然不会像我期望的那样呈现。

<!DOCTYPE html>
<html>

    <head>
        <style>
        .outer{
            background-color:red;
            width:100px;
            height:100px;
            margin-bottom:20px;
        }

        .inner{
            background-color:white;
            margin:5px;
        }

        .shim{
            height:1px;
        }

        .outer2{
            background-color:red;
            width:100px;
            height:100px;
            margin-bottom:20px;
            padding:5px;
        }

        .inner2{
            background-color:white;
        }
        </style>
    </head>

    <body>

        <div class="outer">
            <div class="inner">
                Margin
            </div>
        </div>

        <div class="outer">
            <div class="shim"></div>
            <div class="inner">
                Margin+Shim
            </div>
        </div>

        <div class="outer2">
            <div class="inner2">
                Padding
            </div>
        </div>

    </body>

</html>

Answer 1

您遇到了一个名为“崩溃边距”的常见问题。基本上，每当垂直边距触摸时（即使一个元素在另一个元素内），边距也会崩溃。

在这种情况下，内部div上的margin属性会折叠到外部div的margin-bottom: 20px;属性中。要解决此问题，请在包含元素周围添加一点填充或边框。

只是尝试使用您的代码，它的工作原理： http://jsfiddle.net/hWPyD/2/

有关折叠边距的更多信息： http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

因为html标签上有默认的边距和填充。使用重置like this one删除所有浏览器默认值。（我强烈建议这样做）

CSS Top-Margin问题

2 个答案: