下面有一段代碼
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;
}
就會出現(xiàn)問題如圖
Paste_Image.png
原本打算是讓form與頂部有5px的間距，但是不但沒有出現(xiàn)，還使父標(biāo)簽的頂部出現(xiàn)了5px的間距。
這是因?yàn)楫?dāng)兩個div盒子在嵌套的時候，如果斗使用了margin-top（margin-bottom）的時候1.這個margin-top的值會被層疊到外層的div上面。2.取兩個之中的較大值。就像上面這個例子中的，父標(biāo)簽margin-top 的值是0，子標(biāo)簽的margin-top的值是5px，那么這個就會取5px這個值。
這種情況只會出現(xiàn)在垂直方向，再水平方向不會出現(xiàn)這種情況。
