外邊距合並指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。
合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者
在父級容器有上下外邊距的情況下,子元素如果添加外邊距,父元素和子元素的垂直方向上的外邊距會合並,相鄰元素也會合並。在用margin給子元素和父元素之間留空白的時候通常會發生這樣的問題。
幾種解決辦法:
1:父容器:border:1px solid;(不能是0px)
2:父容器:overflow: hidden;(或auto)
3:父容器:padding:1px;(不能是0或auto,其他的任意數值都可以)
4:父容器或子容器: float:left;(不能是auto)
5:父容器或子容器:position:absolute;
6:子容器:display:inline-block;(或是inline-table)
7:相鄰元素:任意一個添加float:left(不能是auto)