CODEWITHSUNDEEP
htmldjango
PuercoPop
PuercoPop

Reputation: 6807

Django Template Whitespace

I'm at a loss as to what is happening here. I'm getting undesired spaces between span elements when I use indentation in the template. Ie:

<div>
<span class="empty-space"></span>
{% for dia in dias %}
  <span class="{% cycle "dia-par" "dia-impar" %}">{{ dia }}</span>
{% endfor %}
</div>

Damn Spaces

So I'm forced to write the less readable form:

<div>
<span class="empty-space"></span>{% for dia in dias %}<span class="{% cycle "dia-par" "dia-impar" %}">{{ dia }}</span>{% endfor %}
</div>

No Dman Spaces

To get the desired functionality. I already tried with margin-left/right:0px. and {%spaceless%}. Any Ideas what is going on?

Upvotes: 5

Views: 3827

Answers (1)

mkriheli
mkriheli

Reputation: 1856

The span is an inline element so white space is taken into an account.

Django has a spaceless tag which you can use to resolve this, as that removes the spaces between tags: https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#spaceless

It allows you to keep the template structure as is, but the output would be without the extra spaces.

You can also attack it from the CSS level, and set the span's display to inline-block.

Upvotes: 10

Related Questions