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 1024×768 page that I want to have a few block sections on. These sections will have 4px of space on every side. So a 2×2 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.
That’s due to ‘margin collapsing’: the smallest adjacent vertical margin is ignored in the most simple case.