Likely a basic margin question, but mine own

[Himself]

I’m new here, so I don’t know if this has been covered before (probably). I can’t even think of how to construct a search query for this, but I’ll try to explain it clearly.

When I put an element with a top margin inside a div, frequently that margin gets applied to the container, rather than the element inside it. So what happens is, instead of the child element moving down within the container, it stays where it is relative to the container, and the container moves down. Bad. Not what I wanted. And it happens in everything: Safari, Firefox, Opera, not just the Browser Which Shall Remain Nameless. I’ve gotten around this for years simply by adding another div with the class “clear” (“clear: both;”) above the first child element, and it works. But it’s clumsy as all getout. I’d like to stop doing it.

What is it that I’ve been missing all these years?

[wolfcry911]

its margin collapse and expected behavior. There are couple of things you can do. You could place a 1px (or larger) top border or top padding to the parent (container) – either will give the margin something to ‘push’ against. Or you could add overflow: hidden; to the container to change its context, also causing the margin to be inside the parent.

[wolfcry911]

Here’s an article by Eric Meyer that may explain things better.

[Himself]

Indeed, that does it. Thanks.

[Author]

Posts