remove space between paragraph and unordered list

Question

<p>Text</p> <ul>   <li>One</li> </ul>  <p>Text 2</p> 

How do i remove the vertical space between paragraph and the list.

To be more specific - how do I reduce the bottom margin/padding of the p tag ONLY when followed by an unordered list. All the answers I see here remove the space after all p tags - that's not what was asked.

Answer 1

One way is using the immediate selector and negative margin. This rule will select a list right after a paragraph, so it's just setting a negative margin-top.

p + ul {      margin-top: -XX; } 

Answer 2

You can use CSS selectors in a way similar to the following:

p + ul {     margin-top: -10px; } 

This could be helpful because p + ul means select any <ul> element after a <p> element.

You'll have to adapt this to how much padding or margin you have on your <p> tags generally.

Original answer to original question:

p, ul {     padding: 0;     margin: 0; } 

That will take any EXTRA white space away.

p, ul {     display: inline; } 

That will make all the elements inline instead of blocks. (So, for instance, the <p> won't cause a line break before and after it.)