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

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

css

为什么当我对子div标记应用边距时，它会影响父div标记是CSS？,css,Css,我有下面的代码，我想知道为什么当我应用边距上限时会出现这种情况：100px对于徽标id，它会影响包装器div标记，因为它也继承了100px的边距顶部，但是如果我应用填充顶部它会按照我希望的方式工作 <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="" /> <lin

我有下面的代码，我想知道为什么当我应用

边距上限时会出现这种情况：100px

对于徽标id，它会影响包装器div标记，因为它也继承了100px的

边距顶部

，但是如果我应用

填充顶部

它会按照我希望的方式工作

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

代码

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

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

因此，如果我将

padding top

更改为

margin top

，您会注意到背景色向下移动了100px

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

进一步编辑

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

根据每个人对垂直边距崩溃的反应，我发现了一个很好的指南，适合像我这样的初学者

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

我想知道为什么当我申请

margintop:100px到
logo id它影响包装器div标记，因为它还继承了
100px的页边距顶部

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

听起来你需要仔细阅读正在崩溃的页边距
    <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>





一个可能的快速修复方法是将溢出：隐藏设置在#innerwrapper
上，这是它的一部分。这是一种渲染现象；实际上没有什么东西是被继承的
    <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>

这些声明特别令人感兴趣：
    <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>

相邻的垂直边缘塌陷
    <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>

两个边距相邻当且仅当：
    <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>


无线框、无间隙、无填充和无边框将它们分隔开
两者都属于垂直相邻的长方体边缘，即形成以下一对：

框的上边距及其第一个流入子项的上边距


在这种情况下，#wrapper
、#innerwrapper
和#logo
的顶部边距都会受到折叠的影响。
您是否可以包括导致问题的标记的示例以及CSS？“标记”指的是HTML。CSS不是一个时钟-谢谢。我不知道。如果不是标记
，CSS指的是什么？它是一种样式表语言。有时我只是把我的CSS代码称为“样式”（甚至是“代码”）。哇，我没有意识到有这样的东西。我一边说一边读。然而，我不明白为什么我会在#innerwrapper
上将溢出设置为隐藏
，而不是#wrapper
？我确信这两种方法都会起作用，因为#logo都包含在两者中。
    <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>