<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>垂直外邊距疊加</title>
<style>
*{
margin:0;
padding:0;
}
.top{
background:#666;
margin-bottom:10px;
width:100px;
height:100px;
}
.bottom{
background:#CCC;
margin-top:20px;
width:100px;
height:100px;
}
.outbox{
background:#666;
margin:10px;
width:140px;
}
.inbox{
background:#CCC;
margin:20px;
width:100px;
height:100px;
}
.box{
background:#CCC;
margin:20px;
}
.testbox{
background:#CCC;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom">上下垂直外邊距疊加爲較大的那個 就是20</div>
<div class="outbox">
<div class="inbox">裏外垂直外邊距疊加爲較大的那個 也是20</div>
</div>
<div class="box"></div>
<div class="testbox">沒有內容，沒有邊框，沒有內邊距，自身的上下外邊距一樣可以疊加</div>
</body>
</html>
![]()
實際操作發現，相對定位垂直外邊距會疊加，但是任何情況下，水平外邊距是不會疊加的。
