Убрать расстояние между inline-block в Django

22 января 2016 г. 7:10

Наверняка каждый верстальщик сталкивался с проблемой появления расстояния между inline-block. Есть множество решений:

  1. Сдвиг элементов влево (отрицательный margin).
  2. Использование свойств letter-spacing и word-spacing.
  3. Уменьшение размера блоков до нуля (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 сделал своё дело :)

Оцените статью

5 из 5 (всего 1 оценка)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Артём Мальцев

Веб-разработчик, владеющий знаниями языка программирования Python, фреймворка Django, системы управления содержимым сайта Django CMS, платформы для создания интернет-магазина Django Shop и многих различных приложений, использующих эти технологии.

Права на использование материала, расположенного на этой странице https://vivazzi.pro/ru/it/remove-spaces-between-inline-block-in-django/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Артём Мальцев
Ссылка на статью: <a href="https://vivazzi.pro/ru/it/remove-spaces-between-inline-block-in-django/">https://vivazzi.pro/ru/it/remove-spaces-between-inline-block-in-django/</a>

Больше: Правила использования сайта

Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.

Книга предназначается для широкого круга читателей и, по мнению автора, будет полезна специалистам отдела закупок и логистики, категорийным и финансовым менеджерам, менеджерам по продажам, аналитикам, руководителям и директорам, в компетенции которых принятие решений по управлению ассортиментом.

Комментарии: 0

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментирования от своего имени войдите или зарегистрируйтесь на сайте Vuspace

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц