20

次のコードがあると仮定しましょう。

<div style="margin-bottom:100px;">test</div>
<div style="margin-top:100px;">test</div>

要素間に100pxのマージンが作成されることもあれば、200pxになることもあります（私がよく知らない特定の設定を使用する場合）。仕様書にそれに関する情報が見つかりません。これは何に依存しますか？

空白のドキュメントがある場合、のマージンはのマージンとh1結合されます。それらは合計されません。大きい方が使用されます。ph1p

4

1 に答える 1

21

これは、マージンが崩壊することが許可されているために発生しています。特定のマージンがオーバーラップし（主に要素をブロックし）、計算された要素スタイルルールで定義された2つの値の大きい方によって定義された結合マージンを形成する場合があります-これがここで起こっていることです。CSSボックスモデルドキュメントのこのセクションでは、詳細に説明しています。

編集：興味深い点として、いくつかの方法で物事を壊すことなく（つまり、折りたたみ可能なマージンを壊す）これを回避することができます（多く？ ）

  • 要素を作るwidth: 100%; display: inline-block
  • height: 0; width: 0; overflow: hidden要素の間にブロックを置き、その中にドットか何かを入れます。

私はアシュリーのフィドルをフォークしてデモンストレーションしました。おそらく他の方法もありますが、必要に応じて、これらは折りたたみ可能なマージンを回避するための手っ取り早い方法です。

于 2013-02-05T09:31:39.947 に答える