Who invented margin collapsing, anyway?

Margin collapsing. I don’t like it.

I suppose it’s okay in some instances, like for paragraphs. But maybe it could have been kept to p tags. Or somehow the rules could be clearer. I don’t know. Something like that.

I like things to make sense. Margin collapsing doesn’t always make sense to me. And sometimes it turns into margin expanding.

When it hits me unexpectedly at the top of a UI, where more than just the element I gave a margin to gets a margin, this is the trick I pull out of my sleeve. I put margin-top:-1px;padding-top:1px on the parent element.

Okay, that fixes vertical margin-collapsing along the tops of elements. What about horizontal margin collapsing along the sides. Is there such a thing?

Yup, there is (maybe not officially). I ran into that today, too.

So, I have this layout where the left and right columns are floated and a defined width, and the center column is allowed to take up the rest of the room. It was a good way to do it at the time, where the UI was flexible enough to accommodate 1, 2 or 3-column layouts and older browsers. Now I am re-skinning it with just CSS. And the center column sets a new block formatting context.  And I want a margin on it. I could see it in Firebug. The margin I added to the center column was sitting behind the floated left column.

So I added a right margin to the left column instead and the margin showed up. Woo hoo! However, it has occurred to me that I’m not exactly sure why. I think the answer must be in the W3C Visual Formatting spec, but I can’t find it.

But it’s late, the end of the day, and I’m not going to sweat it right now. I’m just going to document this so I don’t forget it later.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s