css - お互いに証拠金が積み重なる？

Question

2 つのブロック要素を隣り合わせに配置すると、それらのマージンが重なり合うことに長い間気付きました。このようなもの：

両方とも<div>がありますがmargin: 1em、 がと衝突すると、両方のmargin1マージンが重なり合うだけです。ここを参照してください: http://jsfiddle.net/39XmC/margin-bottommargin2margin-top

私が期待していたのは、次のようなものでした。

両方<div>の s は、実際には各余白にスペースを与え、互いの余白に重なりません。

これは、要素をフローティングまたはオーバーフローすることで修正できることを知っています。私の質問：

1. [理論的に]なぜこれが起こるのですか? マージンは積み重ねるべきではありませんか？
2. これはブラウザのデフォルトの動作ですか? この動作を持たないプロジェクトに取り組んだことを覚えているからです。

Answer 1

どうしてこうなるのかというと…

余白は、要素のサイズ変更に関するものではありません。彼らは呼吸する部屋についてだけです。box-sizing(マージンを要素のサイズの一部と見なすことさえできないことに気付くかもしれません。そうではないためです。)

margin of1emは、「混雑していないようにするには、自分の周りに少なくとも 1em のスペースが必要です」という意味です。互いに少なくとも 1em のスペースが必要であるという 2 つの要素が隣り合っている場合、それらを 1em 離すと両方の条件が満たされ、最小限のスペースが浪費されます。これを念頭に置いておけば、マージンを折りたたむためのルールはより理にかなっています。