CSS List Spacing After Paragraph

Issue

If I have user-generated content, such as:

<p>my paragraph</p>
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>

This outputs with a paragraph gap between the end of the paragraph and the list like so:

My paragraph:

• item1
• item2

I know I can get rid of the gap in my CSS by setting margin-top on the UL tag and margin-bottom on the p tag, but is there a way to do it without affecting the margins between actual paragraphs?

The content is user-generated with a limited set of tags available and no fonts, sizes... available so all formatting should be done in CSS, if possible without having to put classes in the tags.

I know, because of the way margin collapsing works in CSS, I could usually set

p { margin-bottom:0; }
li { margin-top:0; }

The separation would be correct in both cases as the margin-top property on the p tag would still be 1, but I already set margin-top to 0.2em for a smaller gap between h2 and p tags.

Solution

This is a perfect use case for the sibling selector. However, it doesn't work in IE6 or IE7.

p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 15px; }
p + ul { margin-top: 3px; }
ul + p { margin-top: 3px; }

So, I'm setting the relevant margins to 0 on the p and the ul, and then telling any compliant browsers to look for a p that's after a p and add a top margin to it. Same for a ul after a p (though it's a small margin), and a p after a ul (large margin again).

Again, this doesn't work in IE6 and 7, so you may want to use conditional comments to get a decent (if not perfect) look on those browsers.

Answered By - Ryan Kinal