testing margin-left to fix inline-block

removing whitespace with ems is more adaptable (breaks less)

by jorgeluis

HTML

<ul class="inline-block-list">
	<li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<ul class="inline-block-list" style="font-size: 12px">
	<li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<ul class="inline-block-list" style="font-size: 32px">
	<li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<ul class="inline-block-list" style="font-size: 60px">
	<li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<ul class="inline-block-list" style="font-size: 60px; font-family: sans-serif">
	<li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

.inline-block-list li {
    display: inline-block;
	margin-left: -0.264em;
}


ul {
    margin: 1em 0;
}
li {
    /* semi-transp bg to show overlap */
    background-color: rgba(0,0,0, 0.2);
    padding: 0.5em;
}