How do I set vertical space between list items

Question

Within a  lt ul gt  element  clearly the vertical spacing between lines can be formatted with the line-height attribute   My question is  within a  lt ul gt  element  how do I set the vertical spacing between the list items

User · Answer

Add a margin to your li tags  That will create space between the li and you can use line-height to set the spacing to the text within the li tags

User · Answer

HTML   lt ul gt      lt li gt A lt  li gt      lt li gt B lt  li gt      lt li gt C lt  li gt      lt li gt D lt  li gt      lt li gt E lt  li gt   lt  ul gt    CSS  li not  last-child        margin-bottom  5px      EDIT  If you don t use the special case for the last li element your list will have a small spacing afterwards which you can see here  http   jsfiddle net wQYw7   Now compare that with my solution  http   jsfiddle net wQYw7 1   Sure this doesn t work in older browsers but you can easily use js extensions which will enable this for older browsers

User · Answer

I would be inclined to this which has the virtue of IE8 support   li      margin-top  10px      border 1px solid grey     li first-child       margin-top 0      JSFiddle

User · Answer

To apply to an entire list  use  ul space list li   margin-bottom  1em      Then  in the html    lt ul class space list gt   lt li gt A lt  li gt   lt li gt B lt  li gt   lt  ul gt

User · Answer

you can also use the line-height property on the ul  x000D   x000D  ul     line-height  45px    x000D   lt ul gt   lt li gt line one lt  li gt   lt li gt line two lt  li gt   lt li gt line three lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

Old question but I think it lacked an answer  I would use an adjacent siblings selector  This way we only write  quot one quot  line of CSS and take into consideration the space at the end or beginning  which most of the answers lacks  li   li     margin-top  10px

User · Answer

lt br gt between  lt li gt  lt  li gt  line entries seems to work perfectly well in all web browsers that I ve tried  but it fails to pass the on-line W3C CSS3 checker  It gives me precisely the line spacing I am after  As far as I am concerned  since it undoubtedly works  I am persisting in using it  whatever W3C says  until someone can come up with a good legal alternative

User · Answer

setting padding-bottom for each list using pseudo class is a viable method  Also line height can be used  Remember that font properties such as font-family  Font-weight  etc  plays a role for uneven heights

User · Answer

Many times when producing HTML email blasts you cannot use style sheets or style  style blocks  All CSS needs to be inline  In the case where you want to adjust the spacing between the bullets I use li style  margin-bottom 8px   in each bullet item  Customize the pixels value to your liking

User · Answer

You can use margin  See the example   http   jsfiddle net LthgY   li    margin  10px 0

[html] How do I set vertical space between list items?

Examples related to html

Examples related to css

Examples related to html-lists