css - 为什么当我对子 div 标签应用边距时，它会影响父 div 标签是 CSS？

我有以下代码，我想知道为什么当我将 margin-top: 100px; 应用于 Logo id 时，它会影响包装器 div 标签，因为它也 inherits 100px 的 margin-top 但是如果我应用 padding-top 它会按照我想要的方式工作。

代码

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <link rel="icon" type="image/png" href="" />
    <link rel="stylesheet" type="text/css" media="all" href="" />

    <style type="text/css" media="all">

        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size: 1em;
            font-style: normal;
            font-color: normal;
            color: #ffffff;
        }


        #wrapper {
            background-color: #018eb9;
            width: 100%;
            height: 300px;
        }

        #innerwrapper {
            width: 600px;
            margin: 0px auto;
        }

        #logo {
            padding-top: 100px;
        }

        #menu  li {
            display: inline;
        }

    </style>

    <title>Sample</title>
</head>

<body>
    <div id="wrapper">
        <div id="innerwrapper">
            <div id="logo">logo</div>
            <div id="menu">
                <ul>
                    <li>home</li>
                    <li>about</li>
                    <li>faq</li>
                </ul>
            </div>
        </div>
    </div>
</body>

编辑

根据要求，导致问题的标记是

#logo {
 padding-top: 100px;
}

因此，如果我将 padding-top 更改为 margin-top，您会注意到背景颜色向下移动了 100px

进一步编辑

鉴于每个人对垂直边距折叠的回应，我在 http://www.howtocreate.co.uk/tutorials/css/margincollapsing 找到了适合像我这样的初学者的优秀指南。

最佳答案

I am wondering why is that when I apply margin-top: 100px; to the logo id it affects the wrapper div tag in that it also inherits a margin-top of 100px

听起来您需要阅读有关崩溃边距的内容。

一个可能的快速修复是在 #innerwrapper 上设置 overflow: hidden。

关于css - 为什么当我对子 div 标签应用边距时，它会影响父 div 标签是 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7168623/

css - 为什么当我对子 div 标签应用边距时，它会影响父 div 标签是 CSS？

上一篇：背景附件 :fixed; 的 CSS 问题

下一篇：css - 在 CSS 中完成淘汰规则的最佳方法