Why is that when I apply a margin to a child div tag, it affects the parent div tag is CSS?_问答_开发者

Why is that when I apply a margin to a child div tag, it affects the parent div tag is CSS?

开发者 https://www.devze.com 2023-03-30 00:33 出处：网络

I have the following code and 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 however if I apply

相关专题：css

I have the following code and 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 however if I apply a padding-top it works the way I intend it to work.

CODE

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

EDIT

As requested the markup that is causing the issue is

#logo {
 padding-top: 100px;
}

So if I change padding-top to margin-top, you'll notice the background color move down 100px

Further Editing

In light of the responses regarding vertical margin collapsing from everyone I found an excellent guide fo开发者_StackOverflowr beginners like myself at 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

It sounds like you need to read up on collapsing margins.

http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

One possible quick fix is to set overflow: hidden on #innerwrapper.

This is part of collapsing margins. It's a rendering phenomenon; nothing is actually being inherited.

These statements are of particular interest:

Adjoining vertical margins collapse...

Two margins are adjoining if and only if:

no line boxes, no clearance, no padding and no border separate them

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child

In this case, the top margins of #wrapper, #innerwrapper and #logo are all affected by collapse.