Whitespace created when using if statements I am using the following block of code in a template:

&lt;hr class="rule"&gt;

{% if entry.features | length %}
    &lt;div class="feature-block"&gt;
        &lt;h4 class="is-uppercase"&gt;Features&lt;/h4&gt;
        &lt;ul class="features fa-ul"&gt;
        {% for block in entry.features %}
            &lt;li&gt;&lt;i class="fa-li fa fa-check"&gt;&lt;/i&gt; {{ block.feature }}&lt;/li&gt;
        {% endfor %}
        &lt;/ul&gt;
    &lt;/div&gt;
{% endif %}


The if statement is adding whitespace to the markup which causes styling issues.



How can I correct this? Do I need to format the code block differently?
You can also the hyphen/dash '-' modifier for shorter syntax and in place of the spaceless tags. Plus you get a bit more granular control where you want it, like trimming only leading or trailing space.

Example 1 taken from Twig Docs: Whitespace Control, this would remove whitespace around the if's and output of value.

{% set value = 'no spaces' %}
{#- No leading/trailing whitespace -#}
{%- if true -%}
    {{- value -}}
{%- endif -%}

{# output 'no spaces' #}


Example 2 is a possible real world scenario for retentive space people:

{%- set metaDescription = 'Page description.' -%}
{%- set metaKeywords = 'word1 word2 word3' -%}
{%- set pageTitle = 'A Title' %}

{% if metaKeywords is defined -%}
    &lt;meta name="keywords" content="{{ metaKeywords }}" /&gt;
{%- endif %}

{% if metaDescription is defined -%}
    &lt;meta name="description" content="{{ metaDescription }}" /&gt;
{%- endif %}

{% if pageTitle is defined -%}
    &lt;title&gt;{{ pageTitle }}&lt;/title&gt;
{%- endif %}


Rendered output: 

&lt;meta name="keywords" content="word1 word2 word3" /&gt;
&lt;meta name="description" content="Page description." /&gt;
&lt;title&gt;A Title&lt;/title&gt;