CSS最高保證金問題

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屬性會崩潰為margin-bottom: 20px; 外部div上的屬性。 要解決此問題，請在包含的元素周圍添加一些填充或邊框。

剛剛使用您的代碼嘗試了一下，它就可以工作： http : //jsfiddle.net/hWPyD/2/

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

Answer 2

這是因為在html標簽上有默認邊距和填充。 使用像這樣的重置來刪除所有瀏覽器默認值。 （我強烈建議您這樣做）

CSS最高保證金問題

問題描述

2 個解決方案

解決方案1
4 已采納 2011-07-26 19:05:24

解決方案2
1 2011-07-26 18:54:18

CSS最高保證金問題

問題描述

2 個解決方案

解決方案1 4 已采納 2011-07-26 19:05:24

解決方案2 1 2011-07-26 18:54:18

解決方案1
4 已采納 2011-07-26 19:05:24

解決方案2
1 2011-07-26 18:54:18