CSS controlling block element spacing.

Question

I have a <div> that is filled with varying block elements (e.g. <p>, <ul>, <ol>, <blockquote>, etc.). I'm looking to control only the spacing between those child block elements. I also want there to be no spacing between the child block elements and the top and bottom of the parent div.

I've played with a few solutions. The main one being a mess of a rule using the adjacent sibling combinator. The other being setting the margin-top value to the desired spacing and then using the :first-child pseudo selector.

Are there any cleaner solutions with a decent amount of compatibility?

Thanks.

Answer 1

Personally I would make selectors for all child element types separately because CSS3 pseudoclasses are not implemented well in all browsers for now. You can do it this way in the cleanest manner I can think about:

div.class blockquote, div.class p, div.class ul { /* something */ }

etc.

Answer 2

If i got your point right, shouldn't this suffice?

div * { margin:0 10px }

That * is a bad selector though performance-wise, because of how browsers work: http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/