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这个值。
这种情况只会出现在垂直方向，再水平方向不会出现这种情况。