<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.
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.)
p, ul{
padding:0;
margin:0;
}
If that's not what your looking for you'll have to be more specific
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;
}
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.
This simple way worked fine for me:
<ul style="margin-top:-30px;">
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
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/
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>
Source: Stackoverflow.com