Should I use   or padding to separate horizontal list items

css, html

Solution

Simple answer. Use `padding-left` it's easier to maintain, change and it's more customizable. As suggested above you might even want to use `margin` instead of `padding` this is usually necessary to separate items with a `background-color`.

I'll show an example just give me a second to make one.

Edit:

Here's a fiddle. I decided to just show you full screen since you already know the html and css.

Notice how the background-color is seperated with margins, but not with padding or &nbsp. Margin is often useful for that reason, but sometimes you want the background color in the spacing. You can use both `margin` and `padding` to get the spacing you want.

The reason why margin works that way and padding doesn't is because of the box-model. More about the box-model here.

Problem

I want to put some space between some horizontally laid out list items, should I use `&nbsp;` or padding-left to separate them? `&nbsp` example: ``` <ul class="menu"> <li class="menu_item">Option 1&nbsp;</li> <li class="menu_item">Option 2</li> </ul> ``` padding-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; } ```

Original source