CSS margin spacing differently for top and sides

Question

I hope someone can help me, as I feel rather dumb for asking such a question here. I am not a web designer, but have been stuck with a task of creating a basic layout. The layout will be used on an integrated device with a standard browser, so some of the browser specific CSS tags .. i.e: -moz-border-radius will not necesarily need to work with IE and such.

I have a 1024x768 page that I want to have a few block sections on. These sections will have 4px of space on every side. So a 2x2 grid should have 4px gap(black) on the outside of the whole site, while the insides have 8px gap between the boxes (4px on the right side of one box, and 4px on the left, or 4px on the bottom of one, and 4px on the top, et)

When I set each of these div's CSS to margin: 4px; I get the outside gap of 4px. I also get a horizontal gap of 8px between the left and right sides of the boxes. The problem is that the vertical spacing is 4px, like one of the quarter boxes is not applying a top or bottom margin. I don't think this is something that is supposed to happen, so I figure I made a mistake somewhere.

Thanks in advance -- this place is awesome.

Answer 1

That's due to 'margin collapsing': the smallest adjacent vertical margin is ignored in the most simple case.

Answer 2

Try using padding instead of margin.

The largest margin between two objects is used as the space between them.

If object_a has a margin of 4, and object_b has a margin of 6, if you place them side by side, they will have a margin of 6.

If you use padding, it creates more of a bubble around them, and combines the distance.

If object_a has a padding of 4, and object_b has a padding of 6, if you place them side by side, they will have a padding of 10.

---

UPDATE -- thanks to @Bobby Jack

Horizontal margins never collapse. Only vertical.