Убрать расстояние между inline-block в Django
22 января 2016 г. 7:10
Наверняка каждый верстальщик сталкивался с проблемой появления расстояния между inline-block. Есть множество решений:
- Сдвиг элементов влево (отрицательный margin).
- Использование свойств letter-spacing и word-spacing.
- Уменьшение размера блоков до нуля (font-size: 0;) и др.
Все эти методы обладают недостатком - нужно прописывать дополнительные css правила и проверять свой код на кроссбраузерность. Но есть хороший способ решить задачу - это прижатие элементов к друг другу, например, так:
# до прижатия
<div class="parent">
<div class="child">Элемент 1</div>
<div class="child">Элемент 2</div>
<div class="child">Элемент 3</div>
</div>
# после прижатия
<div class="parent"><div class="child">Элемент 1</div><div class="child">Элемент 2</div><div class="child">Элемент 3</div></div>
Но, как видно из примера, это, мягко говоря, нечитабельно! Тем более на практике мы сталкиваемся с использованием различных django тегов, которые при рендеринге шаблона оставляют свободное место, что приводит к невозможности использования вручную данного метода.
Проблему может решить замечательный встроенный django тег - spaceless, который убирает лишние пробелы между тегами, кроме тех тегов, которые содержат текст. Например:
# шаблон до рендеринга
{% spaceless %}
<div class="parent">
<div class="child">Элемент 1</div>
<div class="child">Элемент 2</div>
<div class="child">Элемент 3</div>
</div>
{% endspaceless %}
# шаблон после рендеринга
<div class="parent"><div class="child">Элемент 1</div><div class="child">Элемент 2</div><div class="child">Элемент 3</div></div>
Как видите, результат отличный! Мы избавились от проблемы отступа между inline-block, не прописывая css правила и без ручной обработки - spaceless сделал своё дело :)
Похожие статьи:
Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.
Книга предназначается для широкого круга читателей и, по мнению автора, будет полезна специалистам отдела закупок и логистики, категорийным и финансовым менеджерам, менеджерам по продажам, аналитикам, руководителям и директорам, в компетенции которых принятие решений по управлению ассортиментом.
Комментарии: 0