remove space between paragraph and unordered list

Question

lt p gt Text lt  p gt   lt ul gt     lt li gt One lt  li gt   lt  ul gt    lt p gt Text 2 lt  p gt    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

User · Answer

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/

User · Answer

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

User · Answer

p  ul       padding 0        margin 0      If that s not what your looking for you ll have to be more specific

User · Answer

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    lt dl gt  lt dt gt Text lt  dt gt   lt dd gt  lt ul gt  lt li gt First item lt  li gt   lt li gt Second item lt  li gt  lt  ul gt  lt  dd gt  lt  dl gt

User · Answer

This simple way worked fine for me    lt ul style  margin-top -30px   gt

User · Answer

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

User · Answer

You can  A  change the markup to not use paragraphs   lt span gt Text lt  span gt   lt br gt   lt ul gt     lt li gt One lt  li gt   lt  ul gt   lt span gt Text 2 lt  span gt    Or  B  change the css  p margin 0px     Demos here  http   jsfiddle net ZnpVu 1

User · Answer

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  lt ul gt  element after a  lt p gt  element   You ll have to adapt this to how much padding or margin you have on your  lt p gt  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  lt p gt  won t cause a line break before and after it

[html] remove space between paragraph and unordered list

Examples related to html

Examples related to css