ボックスモデル

私たちは......箱の内側に、箱の中に内部のすべての想像をレイアウトし、小箱、小さなで満たされた別のボックス内の小さなボックスで満たされた
事がボックスのレイアウトに基づいて。Pの小さな要素、それはまた、抽象ボックスになることができます。
あなたは今、私の心は、それは問題では、見ていない質問がたくさんあります。

以下は、標準のボックスモデルです。（出典）

私たちは通常、コンテンツ領域までの高さは、実際に広げ、高さ、幅の要素に追加します。我々は両方の内側と外側のコンテンツ領域のサイズを変更していない時間の余裕を増加させたが、それは全体のサイズを変更します。私たちは、1つのピクセルのボックス要素を追加した場合、私達はちょうど箱もの（コンテンツ領域+パディング）の内部を見ることができますが、要素の背景を追加した場合、背景は、このエリアに、外側の余白を適用されます。それは個々の要素を分離するために使用され、表示されていません。

マージンは表示されませんが、我々はマージンを追加するために、合計の総幅または高さの要素を数えるとき。
すなわち：

高さ总=マージントップ+ボーダー+パディングトップ+高さ+パディングボトム+ボーダー+マージン下
总幅=のmargin-left +ボーダー+パディング左+幅+パディング右+ボーダー+マージン、右

追加マージン計算せずに固定されたフレームの場合にのみ視覚的サイズ。ここと「マスタリングCSS高度なWeb標準溶液（第二版）」異なる意見があります。（P39-P40、私は本の誤りを考えます）

合併のマージン

統合とは何ですか

最大のスペーサとしての両方を取るが重畳されている場合には、外部から

問題は、合併の前提であります

では通常のストリーム2つの以上のブロック要素の垂直方向の出会いに太字、それが原因となりますmargin倍に

ノーマルストリーム外に除去、二つ以上のブロック要素は、垂直井戸は理解しました

適切にこの出会いを説明し、それが満たすために考えられて何をするには？

簡単に言えば、それは、二つ以上の要素が一緒に来て何もありません。この出会いは本当に場合、検出された国境障壁などがあり、発生するつもりはない折り畳まれています！

具体的には、に分かれて：

Ⅰ：から親要素の最初の子要素の上部外側と上部マージン

それはおそらく、絵の効果です。

親要素であるmargin-topと最初の子要素margin-top出会いは、

コードを見てください：

HTML:
<div class="father">
    <div class="son"></div>
</div>

CSS:
/*为了效果更加明显，为body添加背景颜色*/
body{
    background-color:#ccc;
}
.father{
    background-color:blue;
    height:100px;
    width:100px;
    margin-top:20px;
}
.son{
    background-color:red;
    height:20px;
    width:20px;
    margin-top:20px;
}

レンダリング：

あなたは青い正方形になるようになって20ピクセル下の赤いボックスを見ることができますが、それは合併しています！

この組み合わせは、時には便利で、いくつかのケースではどこのバグを知らないとなっています。だから、この後の浮遊を解消する方法を話します。

Ⅱ：親要素の下の外側の余白と最後の子から

これは親要素であるmargin-bottomと、最後の子要素margin-bottomの重なりの出会いが発生しました。

以前のものと同様に、とても手の込んだません。

Ⅲ：隣接兄弟要素

すなわち、兄弟隣接する2つの隣接する要素margin-topとmargin-bottomの統合が発生しました。

の場合のために40のピクセルの余白：

<div class="block1"></div>
<div class="block2"></div>

.block1 {
    background-color:red;
    height:50px;
    width:50px;
    margin-bottom:20px;
}
.block2 {
    background-color:blue;
    height:50px;
    width:50px;
    margin-top:20px;
}

実際の効果図：

このように、隣接する要素の同胞の合併が発生しました。

Ⅳ：自分の意志の余白と、自分の下マージンの近くに空の要素、

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
        
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
        
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

20ピクセルすることが第一要素と第3のpとの間の距離は、p要素

防止自動マージ

定義から始まって、この問題をよく理解だろう、我々は合併の観点から、合併を防ぐために、いくつかの方法を模索し始めることができます：

最初の方法：通常のストリームを取り除きます

position:absolute;
float:left/right;

第二の方法：非ブロック要素に

既に言及した最初の記事を使用することができるdisplay:inline;インライン要素に要素をブロックします。

注：理論的には、そのライン内の画素に加えて、一連の幅と高さが、ではないが、これは、達成することができmargin-top margin-bottom、また障害ので、私はそれが実際に達成することはできないと思います。

実際には、ブロック要素とライン要素に加えて、要素がinline-block一緒に両方の利点をもたらします。（そして、特殊な記事の要約があるでしょう。）

そのため、使用がdisplay:inline-block実現することができます。

避け出会い

最も重要な前提条件は、2つの要素が、会うマージすることが可能であることである、私たちはそれらを離陸する必要があります！

それでは、二つの中間マージンが出会うはできますか？
私は2例のためのイラストを与えます。
画像のキャプション

これは明らかに、このように状況にのみ父と息子を見ることができます。

そして、この方法は非常に明白です：親要素に設定しますpaddingかborder！

父と息子の要素については、まだ方法があります：
クリアフロート、overflow:hidden overflow:autoそれは、することができ、フローティング削除する方法をまだクリアしていないについて。

父と息子のための要素法
透明フロートプロパティを設定します

ご注意ください

負のマージンを合わせ、正のマージンマージンを加え素子20ピクセルの上部余白として負の最大マージン（最大絶対値）の最小場合、マージンは、上下0PXの最後の要素を-20px。
実際のケースで、あなただけ書くことができるmargin-bottomか、margin-topこのような状況を回避します。

非ブロック要素を表示する方法？

このような理由から、私は特に記事書いた：（。後で同じリンク上）のインライン要素を詳しく見て（あなたは確かかわかりません）

アップデート

2017年12月3日初版
2017年12月3日第二版は、新しい問い合わせを追加し、いくつかの重要な理解を修正し、レイアウトを変更します。
2017年12月15日第三版、いくつかの新しい思考を追加し、レイアウトを変更

CSSボックスモデルだけでなく、外側の境界線の合併問題