Margin или padding? Размышления о том, что и где использовать.

Источник: Margin or padding?
Автор:  Philipp Sporrer.
Перевод: .

Когда с целью форматирования лучше использовать поля, а когда внутренние отступы, и имеет ли это какое-то значение?

Я очень долго мучился в поисках подходящих ответов. И лишь после написания массы ужасного, неразборчивого CSS кода, сопровождаемого различными побочными эффектами, я с уверенностью смог сказать, что мной найдены основополагающие железные правила, касательно перечисленных выше вопросов.

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

В данном примере можно выделить два типа интервалов:

  • между карточками (голубые);
  • между карточками и их контейнером (зеленые);
  • Здесь очень важно понимать, что мы имеем дело с двумя разными понятиями, которые при компоновке не должны быть взаимосвязаны. То есть если мне понадобиться изменить расстояние между карточками и их контейнером, к примеру, до 24 пикселей, то это не должно каким-либо образом влиять на интервал между самими карточками.

    Реализация примера с помощью CSS?

    Существует в буквальном смысле тысячи способов создания такого шаблона с помощью полей и внутренних отступов, но мне хотелось бы представить вашему вниманию один из них, демонстрирующий корректное использование свойств margin и padding. Более того, этот метод позволяет добавлять другие карточки в дальнейшем.

    .container {
    padding: 16px;
    }
    .card + .card {
    margin: 0 0 0 8px;
    }

    Всего-навсего 2 селектора и 2 правила.

    Какую же функцию выполняет знак плюса?

    Символ + представляет собой смежный селектор. Он указывает только на тот элемент, который следует непосредственно за элементом, указанным перед этим селектором.

    Зеленые элементы соответствуют смежному селектору (+).

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

    Это значит, что у нас есть возможность добавлять любое необходимое количество карточек, расстояние между которыми будет неизменно равно восьми пикселям.

    Все работает прекрасно до тех пор, пока нам не понадобиться разместить рядом с карточками что-нибудь другое, отличное от карточки. Ну, скажем, кнопку «Добавить карточку» ("Add card"):

    Судя по уже имеющемуся фрагменту CSS кода мы, скорее всего, не стали бы присваивать новому представляющему кнопку элементу класс .card, поскольку он карточкой не является. Как же быть? Стоит ли ради этого создавать дополнительное имя класса .add-card, которое содержит тоже правило со свойством margin, что и класс .card? Нет, есть более подходящее решение.

    Лоботомированная сова *+*.

    А что, похоже. Несмотря на забавную ассоциацию, этот метод прекрасно работает, и я его постоянно использую с тех пор как узнал о его существовании. Итак, к чему это все? Вот взгляните на соответствующий CSS код:

    .container {
    padding: 16px;
    }
    /* ну что, узнали совушку лоботомизированную? 😜 */
    .container > * + * {
    margin: 0 0 0 8px;
    }

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

    Выделенные зеленым цветом элементы подлежат отбору с помощью смежного селектора (+).

    В итоге.

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

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

    padding — для промежутков между контейнером и его контентом.

    margin — для промежутков между находящимися внутри контейнера элементами.

    Обзор комментариев

    Данная статья, судя по названию претендующая на исчерпывающее руководство по применению полей и внутренних отступов, мягко говоря, таковым не является. Вопрос раскрыт лишь частично и применительно к весьма специфической ситуации. Дело в том, что margin и padding — это совершенно разные, не пересекающихся инструменты форматирования, хотя они и представляют собой два компонента одной концепции — модели бокса. Более интригующей стороной этой статьи можно назвать использование малоизвестных CSS селекторов. Лоботомированная сова, неплохо, да? Один из разработчиков даже признался, что за 20 лет работы он первый раз сталкивается с этим селектором.

    Есть и другие моменты, на которые нужно обратить внимание:

    • Представленный здесь прием хорошо работает только при однострочном размещении карточек. Как только происходит перенос на новую строку, успех уже не гарантирован.
    • Применение таких «прожорливых» селекторов имеет побочный эффект, связанный с производительностью, поэтому для их использования необходимо иметь веские причины.

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

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *