ボックスモデルと呼ばれるものを第一に、
ページ要素は、すべてのフレーム（ボックス）は、フレーム要素は、処理要素内容、パディング、計算マージンと境界を画定します。
第二に、余白
要素の境界ブランク距離の外側の周りに（要素および要素間の距離）
構文：外マージン、4つの方向から定義されました
1、一方的な定義：マージントップ/右/下/左
（1）値：比％幅％デューティ親要素の単位でPX
ポジティブ：右マージン、左の要素は、マージントップ要素が下方に移動します
マイナス：逆方向に、あります
値オート：自動的にブロック要素のマージンを算出し、無効なブロック要素の上下の余白が水平に中央に配置され
2、速記
マージン：値;値は、4つの方向を定義します
マージン：v1とv2の、V1はV2が周りに配置され、垂直に配置されました
マージン：0自動：中心と水平に配置されたブロック要素
マージン：v1とv2のV3、左右セットv2の上に配置されたV1、V3の設定
マージン：v1とv2のV3、V4、右下の左側に
3、外部の要素から来ています
H1〜H6、P、ボディ、オール、UL、DL、前
一般的に要素をリセットする必要があるの開発に余裕を持って
プログラム：* {マージン：0;パディング ：0}
オプションII：リファレンス淘宝
4、余白特殊効果
（1）マージン合併
二つの垂直マージンが会うとき、彼らは一つにマージされます、最後の距離は、2つのマージンの大きい方に依存しています
マージンパフォーマンス中の異元素の（2）ライン
外側要素は除いて、（IMG）は無効であるから縦線
（3）パフォーマンスのブロック内の外国マージンライン
同じ行に、ブロック内の垂直行は余白を設定され、他の行ピアの変化に追従します
（4）マージンオーバーフロー
サブ要素は、余白に設けられているため、特別な条件の下では、それは親要素に適用されます
特別な条件：
1.親フレーム要素
外縁上に配置された最初の子要素については2、外枠は、任意のオーバーフローをもたらします
ソリューション：
、親要素に枠を追加短所：の親要素の実際の高さに影響
パディングを追加するための親要素を、親要素の実際の高さの欠点
親要素の最初の子要素の位置で、空のテーブルを追加します
第三に、パディング
これは、視覚的な大きさの変化を感じて、他の要素に影響を与えませんが、面積自分自身の大きさに影響を与えます
構文：
パディング：値;四方向のパディングを設定します
パディング：v1とv2の、V1はV2が周りに配置され、垂直に配置されました
パディング：v1とv2のV3、左右セットv2の上に配置されたV1、V3の設定
パディング：v1とv2のV3、V4、右下の左のセット
単一の方向：パディングトップ/右/下/左
ボックスサイジング特性計算を、設定がモデルをボックス
ボックスのサイズ変更：コンテンツ・ボックス、デフォルトのボックスモデル計算、divのセット幅、サイズのコンテンツの高さ
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）ボックスサイズ：boder-ボックス; divのセット幅、ボーダーの余白の高さ寸法
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>