まず、デフォルトのレイアウトの縦方向に、デフォルトでは、余白を聞いたその大きなマージン統合現象、があるだろう、はい重畳されていません。しかし、このような状況は、水平方向では発生しません。我々は、例を挙げれ
span{
display: inline-block;
width:100px;
height:100px;
border:1px solid red;
}
div{
width:100px;
height:100px;
border:1px solid green;
}
/*我们让span的两个盒子，相距100px*/
.hezi1{
margin-right:50px
}
.hezi2{
margin-left: 50px;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:50px;
}
..........省略代码..........
<span class="hezi1">我是span</span>
<span class="hezi2">我是span</span>
<div class="box1">我是span</div>
<div class="box2">我是span</div>
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频第二に、ボックスモデル
1.ボックスモデルとは何ですか
：CSSボックスモデルは、比較的比喩、HTMLタグがボックス内のすべてである、私達の項目のほとんどは、ゾーニングの位置現実の生活ですです。
注：すべてのHTMLタグがすべて設定することができます：幅、高さ、パディング、ボーダー、マージン
たとえば、2：
<style>
span,a,b,strong{
display: inline-block;
width:150px;
height:150px;
padding:20px;
border:2px dotted red;
margin:10px;
}
</style>
........省略代码..........
<span>我是span</span>
<a href="#">我是一个超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
解釈：Googleの開発者向けツールによって、我々が見ることができ、各ラベルの面積は、それらの間の数字に属し、彼らはF12の有益モデルの定義に従って厳密です。
ボックスモデルの2幅と高さ
幅と高さ（1）内容：幅\高さは、幅と高さを設定します
幅と高さ（2）エレメント：境界線の幅とコンテンツプラスパディングの高さプラス
（3）空間要素の幅と高さ：縁取っ余白コンテンツプラスパディングを加えた幅と高さ