Inline-block, negative margin hack

testing for the best em value to fix the whitespace bug

by jorgeluis

HTML

<ul class="control">
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>The Third Thing</li>
    <li>Numero Cuatro</li>
</ul>

<ul class="smalltype">
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>The Third Thing</li>
    <li>Numero Cuatro</li>
</ul>

<ul class="large">
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>The Third Thing</li>
    <li>Numero Cuatro</li>
</ul>

<ul class="huge">
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>The Third Thing</li>
    <li>Numero Cuatro</li>
</ul>

CSS

body {
    font-family: sans-serif;
}

li {
    display: inline-block;
    padding: 10px;
    border-right: solid 6px rgba(0,0,255,0.5);
    border-left: solid 6px rgba(255,150,50,0.5);
    margin-right: -0.28em;
}

.smalltype {
    font-size: 11px;
}
.large {
    font-size: 30px;
}
.huge {
    font-size: 60px;
}