5

私はいつも、cssマージンの背後にある基礎となる理論は非常に単純だと思っていました。マージンが10pxのdivは、その要素の周りに10pxのクッションを作成します。2つのdivを並べて配置すると、両方とも10ピクセルのマージンがあり、結果としてdivが20ピクセル離れます。両方の要素のマージンは10ピクセルであるため、要素間の距離は20ピクセルになります。これは正しいようで、私がいつも事実として信じてきたものです。

ただし、最近、2つのdivを並べて配置する代わりに、2つの要素間のマージンがわずか10pxになっていることを発見しました。他のdivによって与えられた10pxのマージンはどうなりましたか？横に並べたものと縦に積み重ねたものの間に一貫性がないのはなぜですか？

余白は基本的に「私のxピクセル以内に何も入れないでください」と言っています。「何か」とは、これには他の要素のマージンが含まれますか？並べて表示する場合、答えは「はい」のようです。余白には、「自分の余白も含めて、私のxピクセル以内に何も入れないでください」と書かれています。垂直の場合、後者を許可するようですか？

誰かがそれを寝かせて夜を続けることができるように明確にしてください:)

4

3 に答える 3

1

それは、それらがいつであるinlineか、またはinline-blockそれらがマージンを一緒に折りたたむことなく互いに隣り合ってスタックするようにそれらのプロパティを変更することと関係があります（これは正常ですが、直感的ではない動作です）。

http://jsfiddle.net/xeCZJ/3/

マージンは、デフォルトのプロパティにあるときに折りたたまれdisplay:blockます。を使用inline-blockして期待どおりに動作させることができますbrが、包含要素の幅を使用して、または幅を使用して改行を手動で制御する必要があります。

または、マージンの代わりにパディングを使用できます。

于 2012-07-26T19:14:34.240 に答える
1

display:inline上/下の余白をすべて無視しdisplay:block、余白を折りたたむことができ、display:inline-blockそれらを足し合わせて大きな余白を作るように見えます。このjsFiddleをチェックアウトします。例：http：//jsfiddle.net/Z2nUN/4/

<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>

<hr />
<div class="allBlock">
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
</div>

<hr />
<div class="allInlineBlock">
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
</div>​


p{ margin:10px; background:#ccc; display:inline;}
.wideMargin{ margin:30px;}
.narrowMargin{ 0px; }
.allBlock p{ display:block;}
.allInlineBlock p{ display:inline-block;}​

気づかなかった。今日私は学んだと思います。

編集：display：blockとinline-blockを追加しました

于 2012-07-26T19:14:46.450 に答える
1

ご自身で答えを見つけたようです: マージンの折りたたみは、CSS2.1 勧告およびCSS3 作業草案の一部です。後者は、デフォルトblock-progressionでは'tb'(上 -> 下) に依存します。これにより、上部/下部マージンのみが折りたたまれます。左/右マージンを折りたたむには、block-progression:lrorを使用する必要がありblock-progression:rlます。

  • ボックス A の左マージンは、親ボックス B の左マージンが隣接していて、B が 'rl' または 'lr' の場合、折りたたまれます。
  • マージンが隣接しており、B が 'rl' または 'lr' の場合、ボックス A の右マージンは親ボックス B の右マージンと一緒に折りたたまれます。

残念ながらblock-progression、最新のワーキング ドラフトではなく、どのブラウザでも実装される可能性はほとんどありません。CSS3 ボックス モジュールは 2007 年から更新されていないため、明確な回答がいつ得られるかは不明です。

于 2012-07-26T19:26:20.297 に答える