Описание

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

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

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

Синтаксис

margin: [значение | проценты | auto] {1,4} | inherit

Значения

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

Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

Auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin

Объектная модель

document.getElementById("elementID ").style.margin

Браузеры

Internet Explorer 6 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto . Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Примечание

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.

Схлопывание не срабатывает:

• для элементов, у которых на стороне схлопывания задано свойство padding .
• для элементов, у которых на стороне схлопывания задана граница;
• на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute ;
• на плавающих элементах (для них свойство float задано как left или right );
• для строчных элементов;
• для .

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

MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

Пример: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:

Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

В каких случаях лучше пользоваться отступами, а в каких полями?

Несколько принципиальных отличий:

Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;

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

14. Высота(height) и ширина(width) блоков

По умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста(или другого содержимого) тем шире и выше блок.

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

HEIGHT – свойство, устанавливающее высоту блока;

WIDTH – свойство, устанавливающее ширину блока;

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

Создадим 4 класса, и поочередно присвоим их одному и тому же боксу (в данном случае DIV ) с текстом.

Теперь фиксированная высота, а ширина растягивается по содержимому.

Здесь фиксированная как высота, так и ширина.

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

Примечание!

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

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

• CSS ,
• HTML

• Tutorial

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

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

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

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

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

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

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

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

В примере 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 { margin-right: 10px; }

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

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

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

Для последней 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; } }

Исключения

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

P. S. Советую ознакомиться с публикацией

• Tutorial

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

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

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

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

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

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 { margin-right: 10px; }

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

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

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

Для последней 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; } }

Исключения

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

P. S. Советую ознакомиться с публикацией

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

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

Я очень долго мучился в поисках подходящих ответов. И лишь после написания массы ужасного, неразборчивого 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 — для промежутков между находящимися внутри контейнера элементами.