1
何が起きているのか分かりません。親divは子divに追加したい余白の影響を受けています。親divが下に移動して、空白を作成する代わりにシフトしています。私のエラーはIDの「中央」のdivにあります。親divの子divは、親divの空白を作成します
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #57FFA6;
color: #221F51;
font-size: 62.5%;
font-family: arial, sans-serif;
}
#header {
background-color: white;
display: block;
height: 80px;
position: relative;
}
#logo {
display: block;
float: left;
margin-left: 115px;
margin-top: 18px;
padding: 0 auto;
position: relative;
}
#navigationBar {
display: block;
float: right;
margin-right: 115px;
margin-top: 27px;
padding: 0 auto;
position: relative;
}
#navigationBar ul li {
display: inline-block;
}
#navigationBar ul li a {
color: black;
font-family: arial, sans-serif;
font-size: 1.5em;
text-decoration: none;
padding: 5px;
position: relative;
}
#navigationBar ul li a:hover {
color: gray;
}
#center {
background-color: white;
display: block;
font-size: 1.6em;
margin: 0 auto;
padding: 0 auto;
position: relative;
width: 990px;
}
#articleOne {
display: block;
height: 200px;
position: relative;
}
#articleOneTitle {
display: block;
margin: 50px;
position: relative;
}<div id="header">
<div id="logo">
<img src="C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/Images/logo.png" alt="logo" height="42" width="115">
</div>
<div id="navigationBar">
<ul id="navigationBarList">
<li><a href="http://www.google.com">Home</a>
</li><b> ·</b>
<li><a href="http://www.google.com">About</a>
</li><b> ·</b>
<li><a href="http://www.google.com">Schedule</a>
</li><b> ·</b>
<li><a href="http://www.google.com">Contact</a>
</li>
</ul>
</div>
<!-- end of navigationBar -->
</div>
<!-- end of header -->
<div id="center">
<div id="articleOne">
<p id="articleOneTitle">In-Home Repair</p>
</div>
<!-- end of articleOne -->
</div>
<!-- end of center -->
<div id="footer">
</div>
<!-- end of footer -->
は再び古き良き "崩壊の余白" のように聞こえます。 - http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing?rq=1 –