<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
#div001 {
background-color:#FF0000;
border:1px solid;
width:100px;
height:100px;
margin:100px;
}
#div002 {
background-color:#00FF00;
border:1px solid;
width:100px;
height:100px;
margin:100px;
}
#divContent {
border:1px solid;
width:300px;
height:500px;
}
</style>
</head>
<body>
<div id="divContent">
<div id="div001">this is Div Contents</div>
<div id="div002">this id Div Contents</div>
</div>
</body>
</html>
因為瀏覽器實作了外邊距合併的功能：
上下兩個相鄰的矩形之間的外邊距會合併，合併後的外邊距會以外邊距較大的數值來做為外邊距設定的值。
範例2：
#div001 {
background-color:#FF0000;
border:1px solid;
width:100px;
height:100px;
margin:200px;
}
#div002 {
background-color:#00FF00;
border:1px solid;
width:100px;
height:100px;
margin:100px;
}
#divContent {
border:1px solid;
width:500px;
height:500px;
}
<div id="divContent">
<div id="div001">this is Div Contents</div>
<div id="div002">this id Div Contents</div>
</div>
沒有留言:
張貼留言