1. 次の例を見てください:
(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、インライン要素間の水平マージンは累積されます II. ブロックレベル要素間の垂直マージンは折りたたまれます III. ネストされたボックスの親ボックスがサイズを指定しない場合、親ボックスのデフォルト設定は、子ボックスのサイズ。親ボックスが Size を指定している場合、親ボックスのサイズが子ボックスより小さい場合、IE6 は包含関係に合わせて親ボックスのサイズを自動的に調整しますが、Firefox は自動的に調整しません。 。
以上がCSSボックス距離計算の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
