☰

この CSS margin-top スタイルが機能しないのはなぜですか? 質問する

tag-icon • tag-icon html margin css
この CSS margin-top スタイルが機能しないのはなぜですか? 質問する

内部marginの に値を追加しようとしました。 一番上の値以外はすべて正常に動作しますが、無視されているようです。 なぜでしょうか?divdiv

期待していたこと:
margin:50px 50px 50px 50px で期待したもの;

私が得るもの:
margin:50px 50px 50px 50px; で得られる結果

コード：

#outer {
  width: 500px;
  height: 200px;
  background: #FFCCCC;
  margin: 50px auto 0 auto;
  display: block;
}

#inner {
  background: #FFCC33;
  margin: 50px 50px 50px 50px;
  padding: 10px;
  display: block;
}
<div id="outer">
  <div id="inner">
    Hello world!
  </div>
</div>

W3スクールmarginなぜこのように動作するのかは説明できません。

ベストアンサー1

#inner実際に要素の上余白が表示されています崩壊要素の上端に#outer、余白のみを#outerそのまま残して配置します (画像には表示されていませんが)。両方のボックスの上端は、余白が等しいため、互いにぴったりと重なります。

W3C 仕様の関連ポイントは次のとおりです。

8.3.1 マージンの縮小

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

隣接する垂直余白が潰れる[...]

2 つの余白が隣接しているのは、次の場合のみです。

  • どちらも、同じブロックフォーマットコンテキストに参加するフロー内ブロックレベルボックスに属します。
  • ラインボックス、クリアランス、パディング、境界線がないため、分離されません。
  • 両方とも垂直に隣接するボックスの端に属し、つまり次のペアのいずれかを形成します。
    • ボックスの上余白と最初のインフローの子の上余白

余白がつぶれないようにするには、次のいずれかの操作を実行します。

上記のオプションによってマージンの縮小が防止される理由は次のとおりです。

  • フロート ボックスと他のボックス間のマージンは相殺されません (フロートとそのフロー内の子の間でも相殺されません)。
  • 新しいブロック書式設定コンテキストを確立する要素 (フロートや、「visible」以外の「overflow」を持つ要素など) のマージンは、インフローの子要素とともに折りたたまれることはありません。
  • インライン ブロック ボックスのマージンは相殺されません (インフローの子要素であっても相殺されません)。

左余白と右余白は、次の理由により期待どおりに動作します。

水平方向の余白がなくなることはありません。

おすすめ記事