4

フィドルはこちら

#twoinline-blockに設定すると、上/下マージンの 16 ピクセル<p>が div コンテンツ ボックスの高さに追加されるため、20 ピクセルではなく 52 ピクセルになります。

4

4 に答える 4

6

あなたが見ているのは、マージンが崩壊するという奇妙なケースの1つです。

親と子がブロック要素であり、垂直方向の余白を区切るもの（パディング、境界線など）がない場合、それらの余白は折りたたまれます。折りたたまれたマージンは、2つの隣接するマージンが追加されていない場合です（ご想像のとおり）が、代わりに2つのうち大きい方が表示されます。親子の場合、折りたたまれたマージンは親の外側になります。上記のリンクの「親と最初/最後の子」セクションで詳細を読むことができます。

親をに設定するか、親inline-blockまたはfloat:left;他の多くのもの（より完全なリストについてはリンクを参照）を設定すると、マージンが崩壊するのを防ぐことができます。これは、私たちが慣れ親しんだ動作につながります。子のマージンが親の内側に表示され、その全高に追加され、親のマージンも表示されます。

于 2013-03-05T02:48:28.353 に答える
3

既存の回答を詳しく説明し、拡張するには..

この動作は、マージンの縮小と呼ばれます。

8.3.1 マージンの縮小

CSS では、2 つ以上のボックス (兄弟である場合とそうでない場合があります) の隣接するマージンを結合して、1 つのマージンを形成できます。このように組み合わされた余白はつぶれていると言われ、結果として生じる組み合わされた余白はつぶれた余白と呼ばれます。

これを回避するには、新しいブロック フォーマット コンテキストを確立する必要があります。

9.4.1 ブロック整形コンテキスト

フロート、絶対配置要素、ブロック ボックスではないブロック コンテナー (インライン ブロック、テーブル セル、テーブル キャプションなど)、および「可視」以外の「オーバーフロー」を持つブロック ボックス (その値が伝播された場合を除く)ビューポートに)コンテンツの新しいブロック フォーマット コンテキストを確立します。

ブロックの書式設定コンテキストでは、ボックスは、包含ブロックの上部から始めて、垂直方向に次々に配置されます。2 つの兄弟ボックス間の垂直距離は、'margin' プロパティによって決まります。ブロック フォーマット コンテキスト内の隣接するブロック レベル ボックス間の垂直マージンが崩壊します。

したがって、新しいブロックの書式設定を確立するいくつかの異なる方法は..

于 2015-01-06T00:00:14.827 に答える
1

これはすでに回答され、受け入れられていますが、明確に修正することでマージンの崩壊を防ぎ、その動作を正常化できることを指摘したいと思います。

私は追加します：

.two:before,
.two:after {
    content: " ";
    display: table; 
}

.two:after {
     clear: both;
}

このフィドルを参照してください。これが私が使ったニコラス・ギャラガーのクリアフィックスです。

于 2013-03-05T03:05:48.793 に答える
-1

段落にはマージンが組み込まれています（ほとんどのブラウザーで）。

これを試して：

p 
{ 
    margin: 0px; 
}
于 2013-03-05T02:43:40.843 に答える