Add space between li elements

Question

I have a nav-menu on which it seems that I can t add a space  margin  3px   between the  lt li gt  elements    You can see the HTML and CSS code on this jsfiddle or below    You will see that I ve added a border-bottom  2px solid  fff  to the  access li to simulate the space between elements  but that is not going to work because under the nav-menu I will have a bunch of different colors  If I add margin-button  2px it doesn t work    This is the HTML    lt nav id  access  role  navigation  gt       lt div class  menu-header-menu-container  gt           lt ul id  menu-header-menu  class  menu  gt               lt li id  menu-item-41  class  menu-item menu-item-type-post type menu-item-object-page menu-item-41  gt                   lt a href  http   localhost 8888 fullstream  page id 5  gt About Us lt  a gt               lt  li gt               lt li id  menu-item-35  class  menu-item menu-item-type-post type menu-item-object-page menu-item-35  gt                   lt a href  http   localhost 8888 fullstream  page id 7  gt Services lt  a gt               lt  li gt               lt li id  menu-item-34  class  menu-item menu-item-type-post type menu-item-object-page menu-item-34  gt                   lt a href  http   localhost 8888 fullstream  page id 9  gt Environmental Surface Cleaning lt  a gt               lt  li gt               lt li id  menu-item-33  class  menu-item menu-item-type-post type menu-item-object-page menu-item-33  gt                   lt a href  http   localhost 8888 fullstream  page id 11  gt Regulations lt  a gt               lt  li gt               lt li id  menu-item-32  class  menu-item menu-item-type-post type menu-item-object-page menu-item-32  gt                   lt a href  http   localhost 8888 fullstream  page id 13  gt Contact Us lt  a gt               lt  li gt          lt  ul gt   lt  div gt      This is the CSS     access       background   0f84e8     Show a solid color for older browsers        display  block      margin  0 auto 6px 55px      position  absolute      top  100px      z-index  9999     access ul       font-size  13px      list-style  none      margin  0 0 0 -0 8125em      padding-left  0     access li       position  relative      padding-left  11px     access a       border-bottom  2px solid  fff      color   eee      display  block      line-height  3 333em      padding  0 10px 0 20px      text-decoration  none      access li hover  gt  a   access ul ul  hover  gt  a   access a focus       background   efefef     access li hover  gt  a   access a focus       background   f9f9f9     Show a solid color for older browsers        background  -moz-linear-gradient  f9f9f9   e5e5e5       background  -o-linear-gradient  f9f9f9   e5e5e5       background  -webkit-gradient linear  0  0   0  100   from  f9f9f9   to  e5e5e5       Older webkit syntax        background  -webkit-linear-gradient  f9f9f9   e5e5e5       color   373737     access ul li hover  gt  ul       display  block

User · Answer

access a       border-bottom  2px solid  fff      color   eee      display  block      line-height  3 333em      padding  0 10px 0 20px      text-decoration  none      I see that you had used line-height but you gave it to  lt a gt  tag instead of  lt ul gt  Try this    access ul  line-height 3 333em   You wouldn t need to play with margins then

User · Answer

Since you are asking for space between   I would add an override to the last item to get rid of the extra margin there    x000D   x000D  li   x000D    background  red  x000D    margin-bottom  40px  x000D    x000D   x000D  li last-child   x000D   margin-bottom  0px  x000D    x000D   x000D  ul   x000D    background  silver  x000D    padding  1px    x000D    padding-left  40px  x000D    x000D   lt ul gt  x000D   lt li gt Item 1 lt  li gt  x000D   lt li gt Item 1 lt  li gt  x000D   lt li gt Item 1 lt  li gt  x000D   lt li gt Item 1 lt  li gt  x000D   lt li gt Item 1 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    The result of it might not be visual at all times  because of margin-collapsing and stuff    in the example snippets I ve included  I ve added a small 1px padding to the ul-element to prevent the collapsing  Try removing the li last-child-rule  and you ll see that the last item now extends the size of the ul-element

User · Answer

I just want to say guys      Only Play With Margin   It is a lot easier to add space between  lt li gt  if you play with margin

User · Answer

add   margin  0 0 3px 0    to your  access li and move  background   0f84e8     Show a solid color for older browsers      to the  access a and take out the border-bottom  Then it will work  Here  http   jsfiddle net bpmKW 4

User · Answer

Most answers here are not correct as they would add bottom space to the last  lt li gt  as well  so they are not adding space ONLY in between  lt li gt    The most accurate and efficient solution is the following  li menu-item not  last-child        margin-bottom  3px       Explanation  by using  not  last-child  the style will be applie to all items  li menu-item  but the last one

User · Answer

You can use the margin property   li menu-item      margin 0 0 10px 0         Demo  http   jsfiddle net UAXyd

[css] Add space between <li> elements

Examples related to css