30
<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.

1
  • do you want to only do this with css or can you change the markup too? Oct 13, 2011 at 19:13
44

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.)

12

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;
}
5

This simple way worked fine for me:

<ul style="margin-top:-30px;">
0
3
p, ul{
     padding:0; 
     margin:0;
}

If that's not what your looking for you'll have to be more specific

2

You can (A) change the markup to not use paragraphs

<span>Text</span>
<br>
<ul>
  <li>One</li>
</ul>
<span>Text 2</span>

Or (B) change the css

p{margin:0px;}

Demos here: http://jsfiddle.net/ZnpVu/1

2

Every browser has some default styles that apply to a number of HTML elements, likes p and ul. The space you mention is likely created because of the default margin and padding of your browser. You can reset these though:

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

You could also reset all default margins and paddings:

* { margin: 0; padding: 0; }

I suggest you take a look at normalize.css: http://necolas.github.com/normalize.css/

2

I got pretty good results with my HTML mailing list by using the following:

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

This does not reset all margin values but only those that create such a gap before ordered list, and still doesn't assume anything about default margin values.

1

I ended up using a definition list with an unordered list inside it. It solves the issue of the unwanted space above the list without needing to change every paragraph tag.

<dl><dt>Text</dt>
<dd><ul><li>First item</li>
<li>Second item</li></ul></dd></dl>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.