Закрыть

Для эффективной работы на сайте используются cookie и обработка персональных данных. Пользуясь этим сайтом, вы соглашаетесь с правилами использования сайта. Подробнее

Цитата дня

Vivazzi.ru

Личный сайт Мальцева Артема

Если человек стремится к чему-то всем своим сердцем, он обязательно сумеет добиться того, чего хочет, даже если это кажется невозможным, даже если все окружающие открыто заявляют ему, что это невозможно.

Чак Норрис

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

22 января 2016 г. 2: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 сделал своё дело :)

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

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

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

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

Автор статьи

Права на использование данной статьи, расположенной на настоящей странице http://vivazzi.ru/it/remove-spaces-between-inline-block-in-django/:

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

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

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

Вам нужно саморазвиваться или вы хотите зарабатывать деньги?

Или вы ищите хорошие IT сервисы или книги? Сохраните свое время и взгляните на мою подборку рекомендаций, которыми постоянно пользуюсь.
Посмотреть рекомендации

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

Вы можете оставить комментарий как незарегистрированный пользователь. Но, зарегистрировавшись, вы сможете получать оповещения об ответах, а также иметь доступ к своему личному аккаунту для просмотра своих комментариев.

Чтобы оставить комментарий от своего имени войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

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

Попробуйте