Remove padding from unordered list - css

Question

Something has bugged me for years. If you look at this fiddle
you'll see a simple unordered list with some padding on the a element and a background colour to create a box.
There is white space between each item in the list. How can you get rid of it so the boxes are touching horizontally?
Html is:
<div id="dvLinks">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
css is:
#dvLinks ul {
margin: 0;
padding: 0;
list - style - type: none;
}
#dvLinks ul li {
display: inline;
}
#dvLinks ul li a {
text - decoration: none;
padding: .1em 1em;
color: #000;
background-color: # 33EEDD;
}

Answer 1

There are several ways. A few are:
1) Remove thew white space between the list item elements:
<li>One</li><li>Two</li><li>Three</li>
jsFiddle example
2) Put HTML comments between the list item elements
<li>One</li><!--
--><li>Two</li><!--
--><li>Three</li>
jsFiddle example
3) Float them left:
#dvLinks ul li {
display: inline;
float:left;
}
jsFiddle example

Answer 2

It's very simple:
CSS
#dvLinks ul li { display: table-cell; }
RESULTS

Answer 3

inline leaves white-space between elements.
Write elements on same line rather than writing them on different lines.
Change
<li>One</li>
<li>Two</li>
<li>Three</li>
to
<li>One</li><li>Two</li><li>Three</li>
Updated fiddle here.

Answer 4

You have to set the ul font-size to 0 and then you have to set the font-size of the li in what ever your like
#dvLinks ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
}
#dvLinks ul li { display: inline; font-size: 16px; }
#dvLinks ul li a
{
text-decoration: none;
padding: .1em 1em;
color: #000;
background-color: #33EEDD;
}
See the Demo here
This is a common problem with the inline/inline-block.
Another solution is the following:
// All elements in one line
<ul><li>Element #1</li><li>Element #2</li>...</ul>
// Or
// No space between li elements
<ul><li>
Element #1</li><li>
Element #2</li>...
</ul>
// Or
// Comments between li elements
<ul><li>
Element #1</li><!--
--><li>Element #2</li><!--
...-->
</ul>
// Or by using CSS
// Change the li display attribute to
ul li
{
display : table-cell;
}
Anyway, best solution for me is the float left. You can do it like that:
<ul id="list" class="clearfix">
<li>Element #1</li>
<li>Element #2</li>
<li>Element #3</li>
</ul>
and in CSS
/* Clear fix resource : http://www.webtoolkit.info/css-clearfix.html */
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix
{
display: inline-block;
}
html[xmlns] .clearfix
{
display: block;
}
* html .clearfix
{
height: 1%;
}
#list li
{
display : block;
float : left;
}

Answer 5

You can use negative margins.
#dvLinks ul li {
margin: 0 -1px;
}

Answer 6

You could add
li { margin-left: -5px;}
http://jsfiddle.net/3gmZa/6/