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.

EDIT: Should have put 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

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

p + ul { margin-top: 0; }

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

Answer 2

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, what's happening here is 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 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.

Answer 4

This depends on the rest of your code, but it should be ok for you to do:

p{ margin-bottom:0; }

You may think this will affect all of the rest of your paragraphs, but due to CSS's "margin-collapsing" feature it actually shouldn't - provided you're in standards mode with a valid DOCTYPE.

Let me know if you need more explanation - or if it doesn't work.