html 盒子模型基礎（外邊距的重疊問題詳解）（三）
阿新 • • 發佈：2018-12-30
1.外邊距的重疊問題
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: red; /*為上邊的元素設定一個下外邊距*/ margin-bottom: 100px; } .box2{ width: 100px; height: 100px; background-color: blue; /*為下邊的元素設定一個上外邊距*/ margin-top: 100px; /* 垂直方向的相鄰的外邊距會發生外邊距的重疊現象 兄弟元素的相鄰外邊距會取最大值 父子元素的相鄰外邊距會傳遞給父元素 * * */ } .left{ background-color: yellow; /*為左側的span設定一個右外邊距*/ margin-right: 100px; } .right{ /* 水平方向的相鄰外邊距不會發生重疊，而是求和 * */ background-color: yellowgreen; /*為右側的span設定一個左外邊距*/ margin-left: 100px; } .box3{ width: 300px; height: 200px; background-color: skyblue; /*border: 1px red solid;*/ /*padding-top: 1px;*/ padding-top: 100px; } .box4{ width: 100px; height: 100px; background-color: red; /*設定一個margin-top*/ /*margin-top: 100px;*/ } </style> </head> <body> <div class="box3"> <div class="box4"></div> </div> <br /><br /><br /><br /> <div class="box1"></div> <div class="box2"></div> <!--<span class="left">我是左側的span</span><span class="right">我是右側的span</span>--> </body> </html>
效果：
