Чем отличается margin от padding css

Поля и отступы CSS: отличия свойств margin и padding

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

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

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:

Отступы:

• padding-top: значение;
• padding-right: значение;
• padding-bottom: значение;
• padding-left: значение;

Поля:

• margin-top: значение;
• margin-right: значение;
• margin-bottom: значение;
• margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:

padding: 2px 4px 5px 10px;

padding: 3px 6px 9px;

padding: 6px 12px;

padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px ), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.

Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:

• Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
• Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
  20 + (-18) = 20 — 18 = 2 пикселя.
• Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 8 , то есть, -6 > -8 . Итоговый размер поля равен -8 пикселей.
• В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
• Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Свойства margin , padding , строчные и блочные элементы.

Давайте рассмотрим, что такое margin и padding и какие между ними различия. Margin это внешний отступ элемента, а padding внутренний.

Если мы имеем два блока один в одном и для внутреннего блока нужен отступ мы используем свойство padding. Но если у нас есть два блока
расположенные радом друг с другом и нужно задать отступ между ними, мы используем свойство margin.Обращаем внимание что для первой картинки могут быть использованы как padding так и margin. Разница в том, что как говорилось ранее padding это внутренний отступ и для размещения внутреннего блока свойство padding задается наружному блоку. Margin работает примерно так же, но наоборот, задается внутреннему блоку для отступа от наружного.
Пример на первую картинку c использованием свойства padding:

И пример с использованием margin:

Пример для второй картинки:

Рассматривая эти свойства на практике более сильным приоритет будет обладать свойство margin в отличии от свойства padding. Но для внутреннего отступа желательно использовать свойство padding.
Форма записи.

Padding-top:значение; Margin- op:значение;
Padding-right:значение; Margin-right:значение;
Padding-bottom:значение; Margin-bottom:значение;

Padding-bottom:значение; Margin-bottom:значение;

Значения этим свойствам задаются в: px, %, em и тд. Например: Padding-top:25px; Также существует сокращенная запись margin и padding.

4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:

padding: 2px 4px 5px 10px;
margin: 2px 4px 5px 10px;

3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней:

padding: 3px 6px 9px;
margin: 3px 6px 9px;

2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:

1 значение: задаются одинаковые отступы для всех сторон элемента:

Строчные и блочные элементы.
Отличие строчных от блочных элементов в том-что блочных элементы на веб-странице начинается с новой строки и идут друг под другом, имеет вид прямоугольника и занимает всю его ширину. Высота блочного элемента зависит от его содержимого. Строчный элемент идут в одну строку. Сколько строчных элементов будет в строке зависит от размера строчного элемента.

К блочным элементам относятся тэги:

и элементы у которых значение display задано как block, list-item, table.

Margin и Padding – блочные модели

margin и padding являются наиболее популярными свойствами для расстановки элементов. В то время как margin определяет пространство за пределами (снаружи) элемента, padding определяет пространство внутри элемента.

Замените CSS-код для элемента h2 следующим:

Вы заметите, что пространство шириной в один знак (margin) было оставлено около заголовка второго уровня,а сам заголовок стал толще в результате padding, равного 3 знакам.

Вы можете задавать margin и padding для четырех сторон элемента по отдельности: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom и padding-left .

Блочная модель

Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin. Визуально представление Блочной модели выглядит так:

Element box

Не обязательно использовать все эти элементы, но блочная модель может использоваться с любым элементом на странице, и это мощный инструмент.

Средняя оценка 0 / 5. Количество голосов: 0

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Организация отступов в верстке (margin/padding)

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

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.

Основные принципы:

1. Отступы идут от предыдущего элемента к следующему.
2. Отступ задается последнему возможному элементу в доме.
3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
4. У последнего элемента группы, отступ обнуляется (всегда).

Отступы идут от предыдущего элемента к следующему.

margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.

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

Отступ задается последнему возможному элементу в доме

margin(ы) задаюся только между соседними элементами дом дерева.

В примере 3 списка, в следующей структуре:

Не за счет дочерних элементов, а за счет соседних делается отступ.

В этой ситуации .main-section__item и является последним возможным, кому можно задать отступ, чтоб разделить списки. Такого же эффекта можно добиться, если задать отступ диву, списку, лишке, ссылке, но это будет не правильно.

Этот пример довольно простой. Но если представить на много большую вложенность, где кто-то намусорил отступами, когда какие-то маргины схлопываются. а какие-то суммируются с падингами.

  
headline in a section of seven words
 
 

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

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

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

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

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

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

• Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
• Добавление класса (можно сделать блок элементом).
• Обертка (как блок, у которого роль, только в позиционировании).

.block__item > .block < margin-right: 10px; >.block.block__item < margin-right: 10px; >.block-wrap > .block

У последнего элемента группы, отступ обнуляется (всегда)

Возьмем для примера список и изображение.

Это горизонтальное меню и логотип (который почему-то справа).

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

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img . О чем говорилось во втором принципе.

Возьмем другой пример:

Интересует нас отступ между новостями, которые задается .blog-preview__item < margin-bottom: 20px; >. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview . О чем говорилось во втором принципе.

Чаще чем другие псевдоклассы, надо использовать :last-child.

.item:not(:last-child) < margin-bottom: 20px; >// или // .item < // другие стили // margin-bottom: 20px; &:last-child < margin-bottom: 0; >> // или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего // .item + .item < margin-top: 20px; >// или // .item < // другие стили // & + & < margin-top: 20px; >> 

Исключения

• В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько
  в коде подряд.
• «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
• Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
• Отрицательные маргины, auto, padding для контейнера.

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

P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.