or browse the recipes

Avoiding Whitespace Between Elements

Problem

You are using inline-block for grids or lists, browsers interpret whitespace in your code and you end up with small spaces between elements in your layout. Here is how to avoid that problem in your Craft loops.

Solution

There are many ways to avoid that problem. One of the most robust one is to block your elements together in your HTML: </li><li> or </div><div>.

Here is how we do it inside a Craft loop:

{% for entry in entries %}

    {# blocking </li><li> together: using an inline-block grid #}
    
    {% if loop.first %}<ul class="list-grid"><li class="list-grid__item">{% endif %}

        <article>
            <h3 class="title-item"><a href="{{ entry.url }}">{{ entry.title }}</a></h3>
            <p>{{ entry.summary }}</p>
        </article>

    {% if loop.last %}</li></ul>{% else %}</li><li class="list-grid__item">{% endif %}

{% endfor %}

Other solutions are to use the whitespace control modifier on tags to trim leading and/or trailing whitespace, or the {% spaceless %}{% endspaceless %} Twig tags.

If you are into that kind of stuff, there is a whole section dedicated to whitespace control in the Twig documentation.

Submitted by Jérôme Coupé on 1st February, 2017