OSXでGoogleChromeを使用していますが、マージンの崩壊の問題が発生しているようです。私は2つのdivを積み重ねており、両方ともマージントップが2px、マージンボトムが5pxで、両方とも1pxの境界線があります。私の計算によると、境界線がマージンの崩壊を防ぐため、divの「コンテンツ」領域の間に1 + 1 + 2 + 5 =7pxのスペースがあるはずです。
さらに紛らわしいのは、前述のdivの1つの下に3pxの境界線と0のマージントップを持つdivがある場所では、9pxのスペースになってしまうことです（私が切望しているように）。div間の唯一の違いは、境界線を縮小してマージンを再定義する追加のクラスであるため、両方のdivに同じパディングがあります（padding-bottomのみが0です）。誰かが私が間違っているところを指摘できますか？
ボーダーは余白スペースの一部を消費します。隣接するマージンが崩壊します。
境界線をしばらく無視します。2 つのディスクがあるとします。上部には 2px の余白があります。下には 5px の余白があります。それらの間のスペースは何ですか？正解は、これら 2 つの値の最大値である 5px です。添加剤ではありません。
次に、それぞれに 1 ピクセルの境界線を追加し、そのマージンを 3 ピクセルに減らします。
マージンは、次の要素までの最小スペースとして解釈されます。
したがって、要素間に 5 ピクセルのギャップが必要です。重なり合うように見てください。
おそらく、より重みのある親クラスまたは id がより優先されます (ご存知のように、ID はより具体的であるか、親などです。これらの複雑な階層関係 (または !important; のどこかに..) があります)、そして、それにはmargin:0またはpadding:0があります。
とにかく、html とその css のチャンクで推測する方が簡単です... :) 多くのことが考えられるからです。