CSS List Spacing After Paragraph

Question

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.

Answer 1

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.

Answer 2

If you want to target ul elements, then use an adjacent sibling selector.

p + ul { margin-top: 0; }

There isn't any decent way to set the p bottom margin this way, but you could use a negative margin on the ul if needed.

Answer 3

The other answers work well, again, as they said, except for IE6/7. However, realize that you will not affect margin between paragraphs if you set your p bottom margin to 0 as long as you set your top margin for p to be the greater of the two values that your margins are currently. As long as you don't have an issue setting the ul top margin to 0 then your p margin spacing will not be affected. So let's say you have this currently defined:

p {margin: 10px}

Setting it to this:

p {margin: 10px 10px 0}

Will not affect your margin between p tags (which seems to be your concern), as the 10px bottom margin is collapsing with the top to make the gap only 10px. If your bottom margin is currently set greater than the top margin, you will need to change your top margin to the greater value to see the same spacing you have been. Now, if you want some bottom margin on the last p then you will have to accommodate for that.

If what the user types ends up in a specific wrapper div that you can target (via id or class), then you could just set these styles for p and ul to apply only within that wrapper if that is a concern.