Why is that when I apply a margin to a child div tag, it affects the parent div tag is 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 alsoinheritsamargin-topof 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.
加载中,请稍侯......
精彩评论