Geek asks and answers

Should I use or padding to separate horizontal list items

I want to place some space between some horizontal elements, should  padding-left be used to separate them?

  example:

<ul class="menu">
    <li class="menu_item">Option 1&nbsp;</li>
    <li class="menu_item">Option 2</li>
</ul>

space-left example:

<ul class="menu">
    <li class="menu_item">Option 1</li>
    <li class="menu_item">Option 2</li>
</ul>
.menu li.menu_item { padding-left: 10px; }
+3
source share
3 answers

Simple answer. Use padding-leftso that it can be maintained, modified and customized. As suggested above, you can even use margininstead padding, it is usually necessary to separate elements with background-color.

I will show an example, just give me a second to do it.

Edit:

fiddle. , html css.

, ,  . , . margin, padding, .

, , . box-model .

+5

- , , . , ... , 2-3 colums row, ..... :

  <ul class="menu">  
    <li> Option 1 </li>
    <li> Option 2 </li>
  </ul>

css :

  .menu
   { 
     //Your style..
   }
   .menu li
   {
      padding-left: 5px; //As you wants...
   }
+1

Refrain from using &nbsp;

padding-left - the correct option.

Alternatively you can use margin-left

When you create a menu, I suggest (based on my past experience) to use margin-leftfor the list used for menu items. Increases flexibility and cleanliness.

0
source

More articles:


All Articles