<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style/01_07_margin.css">
</head>
<body id="m">
<p>第一類：兩個box同級</p>
第一種：
<div id="m1">m1,無margin</div>
<div id="m2">m2,無margin</div>
<hr />
第二種：
<div id="m3">m3,margin-botoom：10px</div>
<div id="m4">m4,無margin</div>
<hr />
第三種：
<div id="m5">m5,無margin</div>
<div id="m6">m6,margin-top：10px</div>
<hr />
第四種：
<div id="m7">m7,margin-bottom：10px</div>
<div id="m8">m8,margin-top：10px</div>
<hr />
第五種：
<div id="m9">m9,margin-bottom：30px</div>
<div id="m10">m10,,margin-top:30px</div>
<hr />
第六種：
<div id="m11">m11,margin-bottom：30px</div>
<div id="m12">m12,,margin-top:29px</div>
<hr />
<p>第二類：兩個box父子級（子級margin-top屬性傳遞給上級，直至body）</p>
<div id="m13">m13，無margin-top
<div id="m14">m14,有margin-top</div>
</div>
<hr />
<p id="hbzj">上面存在問題：當m13無內容時，m14的margin-top傳遞給m13；當m13有內容時，m14的margin-rop不傳遞。暫時沒有想到解決方案。爲此，爲了達到該有的效果，下面是緩兵之計。(使用該box上面的另一個box的margin-bottom屬性代替)
</p>
<br />
<div id="m15">
<div id="m16"></div>
</div>
</body>
</html>
/*
第一類
*/
/*我是分割線1————————————————————————————————————————————*/
#m1{
width: 100px; height: 100px;
background:green;
}
#m2{
width:100px; height:100px;
background:gray;
}
/*我是分割線2————————————————————————————————————————————*/
#m3{
width: 100px; height: 100px;
background:green;
margin-bottom:10px;
}
#m4{
width: 100px; height: 100px;
background:gray;
margin:0px;
}
/*我是分割線3————————————————————————————————————————————*/
#m5{
width: 100px; height: 100px;
background:green;
margin:0px;
}
#m6{
width: 100px; height: 100px;
background:gray;
margin-top:10px;
}
/*我是分割線4————————————————————————————————————————————*/
#m7{
width: 100px; height: 100px;
background:green;
margin-bottom:10px;
}
#m8{
width: 100px; height: 100px;
background:gray;
margin-top:10px;
}
/*我是分割線5————————————————————————————————————————————*/
#m9{
width: 100px; height: 100px;
background:green;
margin-bottom:30px;
}
#m10{
width: 100px; height: 100px;
background:gray;
margin-top:30px;
}
/*我是分割線6————————————————————————————————————————————*/
#m11{
width: 100px; height: 100px;
background:green;
margin-bottom:30px;
}
#m12{
width: 100px; height: 100px;
background:gray;
margin-top:29px;
}
/*
第二類
*/
#m13{
width: 200px; height: 200px;
background:green;
}
#m14{
width: 50px; height: 50px;
background:red;
margin-top: 100px;
}
/*
~~~~~~~~~~~~~~~~~~~~~
*/
#hbzj{
margin-bottom: 100px;
}
#m15{
width: 200px; height: 200px;
background:green;
}
#m16{
width: 50px; height: 50px;
background:red;
}
![]()
