Four inline-block boxes at width: 25% do not fit on one line, and the missing space is about four pixels between each pair. It is not a margin and it is not a border. The newline between one closing tag and the next opening tag is a text node, and inline-level boxes are laid out as text, so it renders as a word space.
<!-- 25% four times, plus three word spaces, is wider than the line -->
<ul class="tiles">
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
<!-- no whitespace between the tags: exact, and unreadable -->
<ul class="tiles"><li>…</li><li>…</li></ul>
<!-- the readable form of the same thing -->
<ul class="tiles">
<li>…</li><!--
--><li>…</li>
</ul>The width of the gap is whatever a space is in the parent’s font, so it changes with the family and the size and cannot be subtracted reliably. Setting font-size: 0 on the parent and restoring it on the children removes it, at the price of breaking em inheritance for anything between the two and of Safari occasionally ignoring the reset. A negative margin-right of about -4px works until the font changes. Floats have none of this because floated boxes are removed from inline layout entirely, which is a large part of why this decade’s grid markup is floats, and why display: table-cell is the other common answer. The space is not a bug — it is what “inline” means, and the tidy indentation is what produces it.