margin-top的坑

下面有一段程式碼
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這個值。
這種情況只會出現在垂直方向，再水平方向不會出現這種情況。