第一個子元素的margin-top和最後一個子元素的margin-bottom越界問題
當父元素沒有邊框border時，子元素加margin-top（這裏以第一個子元素的 margin-top爲例），會出現 margin-top加在父元素上的bug。
解決方法有四種：1.給父元素加border。
2.給父元素加padding。
3.給父元素加overflow:hidden。
4.(推薦使用) 給父元素加前置內容生成。
css 四種方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #parent{ width:300px; height:200px; background-color:yellow; /*①給父元素加border*/ /*border:1px solid black;*/ /*②給父元素加padding*/ /* padding-top:10px;*/ /*③給父元素加overflow:hidden*/ /*overflow:hidden;*/ /*④ 給父元素加前置內容生成*/ } #parent:before{ content:" "; display:table; } #child{ width:100px; height:50px; background-color:red; margin-top:50px; } |
這是html頁面：
1 2 3 | <div id="parent"> <div id="child"></div> </div> |
