CSS - Control Margin between <p> and <li>

Question

I have a client that doesn't want any space between a paragraph and a list item. Is there a CSS way to control the margin between a <p> tag and a <li> tag?

Naturally I can add a class such paragraphs but in a CMS world that is not practical. I need some kind of

p + li { margin-top: 1px };

or something like that.

Answer 1

You could use jQuery (or another JS framework) to tweak it on page load. Otherwise you'd have to wrap both elements in another element and select them in the CSS via that. That's about your only options though.

Answer 2

How about li:first { margin-top:1px; }?

Answer 3

I think this space is caused by the <ul> tag and not the <li> tag. Does this work?

ul{
  margin-top:1px;
  margin-bottom:1px;
}

Answer 4

This ended up being somewhat problematic since this is a CMS environment. I am also working with a client that is not totally html savvy.

Turns out he was stripping the ul tags out of the lists which complicated the spacing issues.

My solution was to restore the ul tags and then do the following:

ul {margin-top: -10px;}

This effectively pulled the list up to the preceding paragraph and looks right.

Thanks for all the input.