CSSマージンの間隔が上と辺で異なる

Question

ここでこのような質問をするのはむしろ愚かであると感じるので、誰かが助けてくれることを願っています。私はウェブデザイナーではありませんが、基本的なレイアウトを作成する作業に悩まされています。レイアウトは標準のブラウザを備えた統合されたデバイスで使用されるため、ブラウザ固有のCSSタグのいくつか、つまり：-moz-border-radiusは、IEなどでは必ずしも動作する必要はありません。

私はいくつかのブロックセクションが必要な1024x768のページを持っています。これらのセクションには、すべての面に4pxのスペースがあります。だから、2x2グリッドはサイト全体の外側に4pxの隙間（黒）を持つべきですが、内部はボックス間に8pxの隙間があります（1箱の右側に4px、左側に4px、または下部に4px 1つ、4pxを先頭に）

これらのdivのCSSをそれぞれmargin：4pxに設定すると、私は4pxの外側のギャップを取得します。私はまた、ボックスの左右の横に8pxの水平方向のギャップを取得します。問題は、4分の1ボックスの1つが上下のマージンを適用していないように、縦の間隔が4ピクセルであることです。私はこれが起こるはずのものだとは思わないので、私はどこかで間違いを犯したと思います。

ありがとうございます - この場所は素晴らしいです。

Answer 1

これは「マージンコラプシング」によるものです。最も単純な場合、隣接する最小の垂直マージンは無視されます。

Answer 2

余白の代わりにパディングを使用してみてください。

2つのオブジェクト間の最大マージンが、それらの間のスペースとして使用されます。

あなたはパディングを使用している場合object_aは4の余裕を持っており、object_bは6の余裕を持っている場合は、それらを並べて配置する場合、彼らは6

の余裕を持って、それはより多くのを作成し、彼らの周りにバブル、そして距離を組み合わせる。

object_aは4のパディングを持っており、object_bは6のパディングを持っている場合は、あなたが側でそれらを側面を配置する場合、彼らは10

---

UPDATEのパディングを持っています - @Bobbyのおかげでジャック

横のマージンは決して崩壊しません。垂直のみ。