css:css
* { margin: 0; padding: 0; } .parent { /*BFC*/ /**加浮動,浮動的元素不會有margin合併,有包裹性、破壞文檔流、BFC**/ /*display: inline-block;*/ /*塊狀化父元素*/ /*overflow不爲visible 屬性讓父級元素塊狀格式化上下文*/ /*position: absolute;*/ /*absolute 塊狀化,*/ /*padding: 10px;*/ /*border: 1px solid green; 解決父元素和子元素margin合併*/ margin: 10px 0; background: green; /*阻止底部margin合併的一個方法*/ /* height: 300px; max-height: 300px; min-height: 300px; */ } .son { width: 300px; height: 100px; margin-bottom: 50px; margin-top: 50px; background-color: red; } .son:nth-of-type(2n) { background-color: blue; } .item { background: red; height: 10px; } span { /*隔斷*/ /*父子margin合併,以及兄弟間的margin合併*/ display: inline-block; height: 0; overflow: hidden; }
html:html
<div class="parent"> <!-- <span> 1 </span> --> <div class="son"></div> <!-- <span>3</span> --> <div class="son"></div> <!-- <span> 2 </span> --> </div> <div class="item"> 這裏只是爲了方便看底部margin </div>