一、看如下例：
（1）HTML部分內容
<body>
<ul>
<li>复仇时刻</li>
<li class="widthborder">莫罗请求布雷斯把小孩丹尼带来神殿以避免恶魔夺取他的灵魂，作为回报他将驱除布雷斯身上的诅咒。</li>
</ul>
<ul>
<li>源代码</li>
<li class="widthborder">科尔突然惊醒发生自己在一辆高速行驶的列车上，他的身边坐着一个素不相识的女子正在与自己讲话。</li>
</ul></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）計算下圖的距離：
（4）解釋：
在標準流中：I、行內元素之間的水平margin是累加的 II、塊級元素之間的垂直margin是塌陷的 III、嵌套盒子若父親沒有指定大小，則預設設定其父盒子是恰好包含子盒子的大小；若父盒子指定了大小，當父盒子大小小於子盒子時，IE6會自動調整其父盒子的大小以適應包含關係，而firefox則不會自動調整。
以上是詳解CSS盒子距離計算的詳細內容。更多資訊請關注PHP中文網其他相關文章！
