下面有一段代码
HTML部分
<div class="jd_header_content">
<a href="#" class="icon_logo"></a>
<form action="#">
<span class="icon_search"></span>
<input type="search">
</form>
<a href="#" class="login">登录</a>
</div>
CSS部分
.jd_header_content{
height: 100%;
min-width: 300px;
max-width: 640px;
margin: 0 auto;
position: relative;
background-color: rgba(201,21,35,0.85);
}
.jd_header_content form{
margin-top: 5px;
padding-left: 75px;
padding-right: 65px;
width: 100%;
height: 30px;
}
就会出现问题如图
Paste_Image.png
原本打算是让form与顶部有5px的间距，但是不但没有出现，还使父标签的顶部出现了5px的间距。
这是因为当两个div盒子在嵌套的时候，如果斗使用了margin-top（margin-bottom）的时候1.这个margin-top的值会被层叠到外层的div上面。2.取两个之中的较大值。就像上面这个例子中的，父标签margin-top 的值是0，子标签的margin-top的值是5px，那么这个就会取5px这个值。
这种情况只会出现在垂直方向，再水平方向不会出现这种情况。
