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.