Inline-Block and Negative Margins

In other words, don't use negative margins to correct the white-space issue.

by Cerebrl

HTML

<p>font-size: 2em</p>
<ul class="large serif">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="large sans">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="large monospace">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<p>font-size: 1em</p>
<ul class="small serif">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="small sans">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="small monospace">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS

.large {
    font-size: 2em;
}
.small {
    font-size: 1em;
}
ul {
    margin: 5%;
}
ul li {
    display: inline-block;
    background: rgba(0,0,0,0.25);
    color: white;
    padding: 5px;
    margin-left: -0.25em;
}
.serif {
    font-family: Times;
}
.sans {
    font-family: Helvetica;
}
.monospace {
    font-family: monospace;
}