一、看如下例子：
（1）HTML部分内容
<body>
<ul>
<li>複仇時刻</li>
<li class="widthborder">莫羅請求布雷斯把小孩丹尼帶來神殿以避免惡魔奪取他的靈魂，作為回報他将驅除布雷斯身上的詛咒。</li>
</ul>
<li>源代碼</li>
<li class="widthborder">科爾突然驚醒發生自己在一輛高速行駛的列車上，他的身邊坐着一個素不相識的女子正在與自己講話。</li>
</body>
（2）CSS内容
ul
{
backgroud:#ddd;
margin:15px;
padding:5px;
}
li
color:black;
background:#aaa;
margin:20px;
padding:10px;
list-style:none;
li.widthborder
border-style:dashed;
border-width:5px;
border-color:black;
margin-top:20px;
（3）計算下圖的距離：
<a target="_blank" href="http://blog.51cto.com/attachment/201308/225838540.jpg"></a>
（4）解釋：
在标準流中：I、行内元素之間的水準margin是累加的 II、塊級元素之間的豎直margin是塌陷的 III、嵌套盒子若父親沒有指定大小，則預設設定其父盒子是恰好包含子盒子的大小；若父盒子指定了大小，當父盒子大小小于子盒子時，IE6會自動調整其父盒子的大小以适應包含關系，而firefox則不會自動調整。
本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261740，如需轉載請自行聯系原作者
![Web前端就業前景好不好 怎麼迅速在行業立足[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)