Skip to main content

Remove the space between two inline-block elements

Using display: inline-block in your CSS file will leave a space between your elements. Here is a trick to avoid this:

<nav>
    <ul>
        <li><a href="#">Page1</a></li><!--
     --><li><a href="#">Page2</a></li><!--
     --><li><a href="#">Page3</a></li><!--
     --><li><a href="#">Page4</a></li>
    </ul>
</nav>

We add a blank comment between </li> and <li> to "fill" the space.

Comments