Removing space in centered nav

by oilvier

HTML

<p>Space removed with ul {font-size:0;} and li {font-size:0;} (because of IE bug) </p>
<ul class="centered centered-1">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

<p>Space removed in HTML code</p>
<ul class="centered centered-3">
    <li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li>
</ul>

CSS

body {font-family:arial;}

p {font-size:12px; border-bottom:1px dotted gray;}

.centered {text-align:center; margin:10px 0; font-size:14px;}
    .centered li {display:inline;}
    .centered a {display:inline-block; padding:5px; background:crimson; border:1px solid firebrick; color:#FFF; text-decoration:none;}

.centered-1 {font-size:0;}
    .centered-1 li {font-size:0; padding:0 5px;}
    .centered-1 a {font-size:14px;}