Tying CSS Styles to Markup

[gothwalk]

Originally published at Now Is A Long Time Too. You can comment here or there.

We’re in the process of a major site design here, and as we get to grips with better and better CSS, there are some odd issues coming up. The main one is working out where the styles go, and the thinking for that seems to take more time than any other element. Is that a 10px padding on the containing div, or a 10px margin on the p tag inside?

So far, I’m settling for whichever is more universally applicable - it’s not going to happen that the div has contents which fall outside that 10px “inner margin”, but the p tag might need other rules - so the padding goes on the div. I’d like to abstract that out to a rule I can communicate to other people, though, something like “apply styles to the outermost element possible” - but I’m not sure if that can really be done.

It’s all complicated by the existence of an IE7 bug, wherein floated elements have the bottom margin completely ignored, so that you have to put the padding on the containing element…