Margin bottom что это: margin-bottom — CSS | MDN - Блог сумасшедшего сисадмина

Содержание

margin-bottom | CSS | WebReference

Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры

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

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

Значение по умолчанию	0
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

margin-bottom: <размер> | <проценты> | auto

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

auto: Указывает, что размер отступов будет автоматически рассчитан браузером.

Песочница

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

div {
  background: #e4efc7;
  padding: 10px;
  margin-bottom: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin-bottom</title> <style> .layer1 { background: #8b0086; /* Цвет фона */ color: white; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ margin-bottom: -7px; /* Отступ снизу */ } .

layer2 { margin-left: 40px; /* Отступ слева */ background: #e9c1e4; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div>Невротический инвариант в XXI веке</div> <div> Весьма существенно следующее: аллегория монотонно иллюстрирует невротический холерик, таким образом, второй комплекс движущих сил получил разработку в трудах А.Берталанфи и Ш.Бюлера. </div> </body> </html>

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

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

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

Объект.style.marginBottom

Примечание

Браузер Internet Explorer до версии 7 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Спецификация

Спецификация	Статус
CSS Box Model Module Level 3	Рабочий проект
CSS Level 2 Revision 1 (CSS 2. 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


3	12	1	3.5	1	1


1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Отступы и поля

См. также

margin
margin-left
margin-right
margin-top

Рецепты

Как задать расстояние между пунктами списка?

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02. 03.2020

Редакторы: Влад Мержевич

Отступы в CSS (margin и padding)

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором — внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

Для демонстрации отступа нам потребуется два блока div. Создадим их:

<div>
   <div></div>
</div>

Как можно догадаться, внешний блок ограничивает ширину внутреннего. А внутренний ограничивает высоту внешнего. Чтобы различать блоки, подкрасим их рамки: внутренний будет красным, внешний синим. Получится такой результат:

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

<div>
   <div></div>
</div>

На странице браузера получится такой результат:

Существует возможность задать отступ для каждой стороны отдельно. Для этого используйте свойства:

margin-left — отступ слева
margin-right — отступ справа
margin-top — отступ сверху
margin-bottom — отступ снизу

Аналогично это можно сделать через свойство margin, передав ему сразу четыре значения. К примеру так: «margin: 10px 20px 30px 40px«. В таком случае отступы будут: сверху — 10px, справа — 20px, снизу — 30px, сверху — 40px. попробуем это на практике:

<div>
   <div></div>
</div>

Получится такой результат:

Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения.

К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.

Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.

С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.

Попробуем продемонстрировать эту центровку:

<div>
   <div></div>
</div>

В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:

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

Внутренний отступ (padding)

Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)

<div>
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>

Результат будет таким:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

Существует возможность задать отступ для каждой стороны отдельно. Для этого используйте свойства:

padding-left — отступ слева
padding-right — отступ справа
padding-top — отступ сверху
padding-bottom — отступ снизу

Проблема расширения (box-sizing)

У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:

<div>
   Без отступа
</div>
<div>
   С отступом
</div>

В браузере получится такой результат:

Без отступа

С отступом

Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):

<div>
   Без отступа
</div>
<div>
   С отступом
</div>

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

Без отступа

С отступом

Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .

Все, что вам нужно знать о свойстве margin в CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Everything You Need To Know About CSS Margins».

Когда мы начинаем изучать CSS, одной из первых мы осваиваем тему блочной модели. Свойство margin — часть этой модели. Это свойство определяет прозрачное пространство вокруг блока, отодвигающее от этого блока другие элементы. Свойства margin-top, margin-right, margin-bottom и margin-left были описаны еще в CSS1, наряду со свойством margin, позволяющим задать все отступы одновременно.

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

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

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

Блочная модель это то, как разные части блока — содержимое (content), внутренние (padding) и внешние (margin) отступы, граница (border) — располагаются друг относительно друга и взаимодействуют между собой.

В CSS1 блочная модель была изображена в виде ASCII-диаграммы, как показано на иллюстрации:

Все четыре свойства margin (по одному для каждой стороны) и сокращенный вариант написания (просто margin) были определены еще в CSS1.

В спецификации CSS2.1 есть иллюстрация, показывающая блочную модель и также определяющая термины, которые мы все еще используем для описания различных блоков. В этой спецификации описаны content box, padding box, border box и margin box. Каждый из этих блоков определяется краями контента, внутреннего оступа, границы и внешнего отступа соответственно.

Сейчас у нас есть спецификация блочной модели в третьей версии. Определения блочной модели (и в частности внешних отступов) в ней такие же, как в CSS2, поэтому в нашей статье мы будем пользоваться последними.

Схлопывание внешних отступов

Спецификация CSS1, определяя внешние отступы, также определяла такое явление как схлопывание (collapse) вертикальных внешних отступов. С тех самых пор это поведение является причиной постоянного раздражения при работе с margin.

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

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

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

Смежные блоки-сиблинги

(Вообще сиблинги — собирательное определение детей одних родителей, т. е., братья и сестры. Здесь имеются в виду одноранговые блоки, скажем, идущие подряд абзацы, — прим. перев.).

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

В примере, приведенном ниже, у нас есть три элемента div. У первого есть верхний и нижний margin в 50 px. У второго тоже есть такие отступы, но по 20 px. У третьего есть верхний и нижний margin по 3 em.

See the Pen Smashing: margins, adjacent siblings by rachelandrew (@rachelandrew) on CodePen.

В итоге расстояние между первым и вторым элементом — 50 px, потому что меньший margin в 20 px поглотился большим. А отступ между вторым и третьим элементами — 3 em, потому что 3 em больше, чем 20 px (нижний margin второго элемента).

Полностью пустые блоки

Если блок пустой, его внешние отступы (верхний и нижний) могут схлопнуться друг с другом. В следующем примере элемент с классом empty имеет верхний и нижний margin (по 50 px каждый). Но в итоге расстояние между первым и третьим элементами не 100 px, а 50 px. Так получилось, потому что верхний и нижний отступы схлопнулись. Если в этот пустой блок добавить что-нибудь (хотя бы даже внутренний отступ — padding), схлопывание внешних отступов не произойдет.

See the Pen Smashing: margin collapsing on an empty element by rachelandrew (@rachelandrew) on CodePen.

Родительский элемент и первый или последний потомок

Этот сценарий чаще всего застает людей врасплох, потому что он не то чтобы сильно интуитивен. В следующем примере у нас есть элемент div с классом wrapper. Также ему назначена красная обводка, чтобы его было лучше видно. Все три элемента-потомка имеют margin в 50 px (т. е., внешние отступы со всех сторон). Но в результате мы не получаем отступа от верхней и нижней границы родительского элемента.

See the Pen Smashing Margins: margin on first and last child by rachelandrew (@rachelandrew) on CodePen.

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

Схлопываются только вертикальные отступы

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

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

Что может предотвратить схлопывание внешних отступов

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

Начнем с того, что схлопывание не произойдет, если поместить что-то между рассматриваемыми элементами.

Например, отступы совершенно пустого блока не схлопнутся с отступами верхнего и нижнего блоков, если этот пустой блок имеет границу или внутренний отступ. В приведенном ниже примере я добавила в пустом блоке padding в 1 px. Теперь над ним и под ним появились внешние отступы в 50 px.

See the Pen Smashing: empty boxes with padding do not collapse margins by rachelandrew (@rachelandrew) on CodePen.

За таким поведением стоит определенная логика. Если блок совершенно пуст, не имеет обозначенных границ или внутренних отступов, он попросту невидимый. Это может быть, например, пустой абзац, добавленный в разметку вашей CMS. Если ваша CMS добавляет лишние элементы вроде абзацев, вы, вероятно, не захотите, чтобы из-за этого появлялись огромные промежутки между абзацами (а они появились бы благодаря отступам). Добавьте в пустой блок что угодно — и вы получите эти промежутки.

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

See the Pen Smashing Margins: margin on first and last child doesn’t collapse if the parent has a border by rachelandrew (@rachelandrew) on CodePen.

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

Создание блочного контекста форматирования

Новый блочный контекст форматирования также предотвращает схлопывание внешних отступов. Если мы вернемся к примеру с первым и последним потомком, когда внешние отступы выходили за пределы wrapper, и установим для wrapper свойство display: flow-root, это создаст новый блочный контекст форматирования и в результате отступы останутся внутри обертки.

See the Pen Smashing Margins: a new block formatting context contains margins by rachelandrew (@rachelandrew) on CodePen.

Если хотите узнать больше о свойстве display: flow-root, почитайте статью “Understanding CSS Layout And The Block Formatting Context”. Изменение значения свойства overflow на auto даст тот же эффект. Это тоже создаст новый блочный контекст форматирования, хотя может привести к появлению полос прокрутки, а это порой нежелательно.

Контейнеры Flex и Grid

Flex и Grid-контейнеры устанавливают Flex и Grid-контексты форматирования для своих потомков, а потому их поведение будет отличаться от блочного макета. Одно из отличий — внешние отступы не схлопываются.

Если мы возьмем пример, который обсуждали выше, и превратим wrapper во flex-контейнер с отображением элементов с flex-direction: column, мы увидим, что теперь внешние отступы содержатся внутри обертки. Кроме того, внешние отступы между смежными flex-элементами не схлопываются друг с другом, в результате чего мы получаем расстояние в 100 px между ними (50 px нижнего отступа одного элемента плюс 50 px верхнего отступа другого).

See the Pen Smashing Margins: margins on flex items do not collapse by rachelandrew (@rachelandrew) on CodePen.

Стратегии использования margin на вашем сайте

Имея в виду схлопывание внешних отступов, стоит определить постоянный подход к работе с ними. Самый простой вариант — указывать внешние отступы только сверху или только снизу. Таким образом у вас не должны слишком часто возникать проблемы со схлопыванием, ведь сторона элемента с margin всегда будет примыкать к стороне другого элемента без margin.

Примечание. Гарри Робертс написал отличный пост о том, почему установка внешних отступов одной направленности это хорошая идея даже без учета проблем со схлопыванием.

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

Идеальным вариантом было бы при необходимости давать компонентам display: flow-root. В качестве запасного варианта для старых браузеров для создания нового блочного контекста форматирования можно использовать overflow, превращать родительский элемент во flex-контейнер или добавлять какой-нибудь пиксель внутреннего отступа. Не забывайте, что вы можете использовать функционал запросов для определения поддержки для display: flow-root — чтобы только старые браузеры получали менее оптимальное решение.

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

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

И в завершение статьи давайте рассмотрим еще пару интересных вещей об отступах.

Указание значения margin в процентах

При использовании процентов в CSS всегда следует помнить о том, проценты от чего имеются в виду. Если вы задаете размеры margin и padding в процентах, это всегда проценты от inline-размера родителя (ширина в horizontal writing mode). Это означает, что при использовании процентов у вас будет одинаковый внутренний отступ со всех сторон элемента.

Рассмотрим пример. У нас есть обертка (wrapper) шириной в 200 px. Внутри — блок с margin: 10%. То есть, внешний отступ будет по 20 px со всех сторон, потому что 20 px это 10% от 200 px.

See the Pen Smashing Margins: percentage margins by rachelandrew (@rachelandrew) on CodePen.

Внешние отступы в «относительнопоточном мире»

В этой статье мы все время говорили о вертикальных отступах. Но в современном CSS появилась тенденция говорить о направлении в относительном ключе, а не в физическом смысле. Говоря о вертикальных отступах, мы на самом деле говорим об отступах в блочном измерении. Они могут быть верхними и нижними — если мы в horizontal writing mode (когда чтение идет слева направо и сверху вниз), но в vertical writing mode отступы становятся левыми и правыми.

Когда мы употребляем логические направления (относительно потока), нам проще говорить про начало и конец блока, а не про верх и низ. Чтобы упростить все это, CSS представил спецификацию логических свойств и значений. Она сопоставляет «относительнопоточные» свойства и физические.

Что касается внешних отступов, у нас есть следующие варианты (если мы работаем с английским языком и прочими языками, где чтение текста идет слева направо):

margin-top = margin-block-start
margin-right = margin-inline-end
margin-bottom = margin-block-end
margin-left = margin-inline-start

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

margin-block
margin-inline

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

See the Pen Smashing margins: flow relative margins by rachelandrew (@rachelandrew) on CodePen.

Дополнительно по теме логических свойств и значений можно почитать вот эту статью или MDN.

Итоги

Теперь вы знаете большую часть того, что вообще стоит знать о внешних отступах! Кратко повторим:

Схлопывание отступов имеет большое значение. Понимание того, когда схлопывание происходит, а когда — нет, поможет вам решить любые связанные с ним проблемы.
Если вы будете задавать внешние отступы только для одного направления, это избавит вас от многих проблем со схлопыванием.
Как и во всех прочих случаях, следует делиться с командой теми решениями, которые вы приняли, и оставлять комментарии в коде.
Если вы будете думать о направлениях в блочном и строчном измерении, а не в физическом (верх/низ, лево/право), вам будет легче привыкнуть к тому, что веб становится независящим от направления письма.

Margin bottom css что это

CSS margin-bottom Свойство

Установите нижнее поле для элемента <p> на 25 пикселей:

Подробнее примеры ниже.

Определение и использование

Свойство margin-bottom задает нижнее поле элемента.

Примечание: Допустимы отрицательные значения.

Значение по умолчанию:	0
Inherited:	no
Animatable:	yes, see individual properties. Читайте о animatable
Version:	CSS1
Синтаксис JavaScript:	object.style.marginBottom=»100px»

Поддержка браузера

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

Свойство
margin-bottom	1.0	6.0	1.0	1.0	3.5

Синтаксис CSS

Значения свойств

Значение	Описание
length	Задает фиксированное нижнее поле в пикселах, см, EM и т.д. Значение по умолчанию — 0. Допустимы отрицательные значения. Читать о единицах длины
%	Задает нижнее поле в процентах от ширины содержащего элемента
auto	Обозреватель вычисляет нижнее поле
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Margin Collapse

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

Это происходит не на горизонтальных (левых и правых) полях! Только вертикальные (верхние и нижние) поля!

Посмотрите на следующий пример:

Пример

В приведенном выше примере элемент < p > имеет верхний и нижний пределы 30px. Элемент < p > имеет верхний и нижний пределы 20px.

Это означает, что вертикальное поле между < p > и < p > должно быть 50px (30px + 20px). Но из-за краха маржи, фактические маржа заканчивается время 30px!

margin-bottom

Свойство CSS margin-bottom используется для указания размера нижнего внешнего поля элемента, которое находится за нижней границей его рамки (border-bottom). В отличие от нижнего внутреннего отступа (padding-bottom), цвет поля всегда прозрачный, поэтому сквозь него просвечивается фон окружающего контекста.

Расположение нижнего поля — margin-bottom

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

Тип свойства

Применяется: ко всем элементам, кроме тегов <COL>, <COLGROUP>, <THEAD>, <TFOOT>, <TBODY>, <TR>, <TD>, <TH> и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row и table-cell.

Значения

Значением свойства margin-bottom является указание размера нижнего поля элемента одним из следующих способов:

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: в спецификации указан ноль (0), но на самом деле у некоторых HTML-элементов браузеры изначально устанавливают определенный размер полей. Например, у параграфов присутствуют ненулевые поля сверху и снизу.

Синтаксис

Пример CSS: использование margin-bottom

Результат. Использование свойства CSS margin-bottom.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Да	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8. 0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit и в некоторых случаях неправильно считают нижнее поле абсолютно позиционируемых элементов, когда margin-bottom : auto .

Кроме этого IE 6.0 неправильно рассчитывает процентные значения margin-bottom .

2.2. CSS блочная модель

Модуль CSS Box Model описывает свойства padding и margin , которые создают поля внутри и отступы снаружи CSS блока. Размеры блока также могут быть увеличены за счет рамки.

Каждый блок имеет прямоугольную область содержимого в центре, поля вокруг содержимого, рамку вокруг полей и отступ за пределами рамки. Размеры этих областей определяют свойства padding и его подсвойства — padding-left , padding-top и т.д., border и его подсвойства, margin и его подсвойства.

CSS блочная модель в деталях

Содержание:

1. Определение блочной модели

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

край содержимого
край поля
край рамки
край отступа

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

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

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

2. Отступы элемента

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

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

2.1. Схлопывание вертикальных отступов

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

margin-bottom: 30px; width: 100%; display: inline-block;

margin-top: 15px; width: 100%; display: inline-block;

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

Отступы не схлопываются:

Между плавающим блоком и любым другим блоком;
У плавающих элементов и элементов со значением overflow , отличным от visible , со своими дочерними элементами в потоке;
У абсолютно позиционированных элементов, даже с их дочерними элементами;
У строчно-блочных элементов.

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

2.2. Выпадение вертикальных отступов

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

Чтобы избавиться от эффекта выпадения, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent .

2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left

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

Свойства не наследуются.

margin-top/margin-right/margin-bottom/margin-left
Значения:
длина	Размер отступа задается в единицах длины, например, px , in , em . Значение по умолчанию 0 .
%	Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента.
auto	Для элементов уровня строки, плавающих ( float ) значения margin-left или margin-right вычисляются в 0 . Если для элементов уровня блока задано margin-left: auto или margin-right: auto — соответствующее поле расширяется до края содержащего блока, если оба — их значения становятся равными, что горизонтально центрирует элемент относительно краев содержащего блока.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

2.4. Краткая запись отступов: свойство margin

Свойство margin является сокращенным свойством для установки margin-top , margin-right , margin-bottom и margin-left в одном объявлении.

Если существует только одно значение, оно применяется ко всем сторонам.

Если два — верхний и нижний отступы устанавливаются на первое значение, а правый и левый — устанавливаются на второе.

Если имеется три значения — верхний отступ устанавливается на первое значение, левый и правый — на второе, а нижний — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.

3. Поля элемента

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

Фоны элемента по умолчанию закрашивают поля элемента и пространство под его рамкой. Это поведение можно настроить с помощью свойств background-origin и background-clip.

3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left

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

Свойства не наследуются.

padding-top/padding-right/padding-bottom/padding-left
Значения:
длина	Поля элемента задаются при помощи единиц длины, например, px , pt , cm . Значение по умолчанию 0 .
%	Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Поля сверху и снизу равны полям слева и справа, т.е. верхние и нижние поля тоже вычисляются относительно ширины элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

3.2. Краткая запись полей: свойство padding

Свойство padding является сокращенным свойством для установки padding-top , padding-right , padding-bottom и padding-left в одном объявлении.

Если существует только одно значение, оно применяется ко всем сторонам.

Если есть два значения, верхнее и нижнее поля устанавливаются на первое значение, а правое и левое — на второе.

Если имеется три значения, верхнее поле устанавливается на первое значение, левое и правое — на второе, а нижнее — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.

4. Рамки элемента

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

CSS :: Свойство margin-bottom

css-свойство margin-bottom (от англ. bottom margin – нижнее поле) устанавливает внешний отступ для нижней стороны элемента (нижнее поле).

Под внешним отступом элемента подразумевается расстояние от границы (стороны) текущего элемента до соответствующей границы (стороны) родительского элемента либо до соответствующей границы (стороны) соседнего элемента (см. рисунок №1).

Рис №1. Общая схема элемента

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

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

Большинство браузеров по умолчанию устанавливает для элемента «body» внешние отступы отличные от нуля (обычно это 8px), которые отсчитываются относительно края окна браузера. Их можно убрать, задав для тела документа значение margin равное нулю.

Официальный сайт W3C: https://drafts.csswg.org/css-box-3/#margin

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/margin-bottom

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	<style>
		/* Прием предварительного обнуления */
		/* всех отступов у всех элементов */		
		*{
		margin: 0;		  
		padding: 0;		  
		outline: 0;		  
		}
		p{
		width: 500px;
		border: solid 2px green;
		}
		/* Внешние и внутренние отступы в одном объявлении */
		. all_in_one{
		margin: 50px 0px 50px 100px;
		padding: 20px 10px 20px 10px;
		}		
		/* Внешние и внутренние отступы по отдельности */
		.separate{
		margin-top: 50px;
		margin-right: 0px;        
		margin-bottom: 50px;		
		margin-left: 100px;
		padding-top: 20px;
		padding-right: 10px;        
		padding-bottom: 20px;		
		padding-left: 10px;
		}
	 
	</style>
	
</head>
<body>
	<p>
		Внешние и внутренние отступы в одном объявлении<br>
		margin: 50px 0px 50px 100px;<br>
		padding: 20px 10px 20px 10px;        
	</p>
	<p>
		Тоже самое, но по отдельности<br>
		margin-top: 50px;<br>
		margin-right: 0px;<br>        
		margin-bottom: 50px;<br>		
		margin-left: 100px;<br><br>
		padding-top: 20px;<br>
		padding-right: 10px;<br>        
		padding-bottom: 20px;<br>		
		padding-left: 10px;        
	</p>	
</body>
</html>

Пример №1

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>
	<style>
		p{
		width: 500px;
		border: solid 2px green;
		}
		/* Отступы в процентах в одном объявлении */
		. all_in_one{
		margin: 10%;
		padding: 5%;
		}		
		/* Отступы в процентах по отдельности */
		.separate{
		margin-top: 10%;
		margin-right: 10%;        
		margin-bottom: 10%;		
		margin-left: 10%;
		padding-top: 5%;
		padding-right: 5%;        
		padding-bottom: 5%;		
		padding-left: 5%;
		}
	 
	</style>
	
</head>
<body>
	<p>
		Отступы в процентах в одном объявлении<br>
		margin: 10%;<br>
		padding: 5%;        
	</p>
	<p>
		Тоже самое, но по отдельности<br>
		margin-top: 10%;<br>
		margin-right: 10%;<br>        
		margin-bottom: 10%;<br>		
		margin-left: 10%;<br><br>
		padding-top: 5%;<br>
		padding-right: 5%;<br>        
		padding-bottom: 5%;<br>		
		padding-left: 5%;        
	</p>	
</body>
</html>

Пример №2

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №3</title>
	<style>
		div{
		width: 500px;
		height: 300px;
		margin-top: 7em;
		border: solid 3px blue;
		background-color: yellow;
		}
		
		p{
		width: 300px;
		padding: 10%;
		border: solid 2px green;
		background-color: violet;
		}
		/* Отрицательные отступы в одном объявлении */
		. all_in_one{
		margin: -30px 30px 30px -30px;
		}		
		/* Отрицательные отступы по отдельности */
		.separate{
		margin-top: -30px;
		margin-right: 30px;        
		margin-bottom: 30px;		
		margin-left: -30px;
		}
	 
	</style>
	
</head>
<body>
	<div>
		<p >
			Отрицательные отступы в одном объявлении<br>
			margin: -30px 30px 30px -30px;      
		</p>
	</div>
	<div>
		<p >
			Тоже самое, но по отдельности<br>
			margin-top: -30px;<br>
			margin-right: 30px;<br>        
			margin-bottom: 30px;<br>		
			margin-left: -30px;			   
		</p>
	</div>
	
</body>
</html>

Пример №3

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №4</title>
	<style>
		/* Прием предварительного обнуления */
		/* всех отступов у всех элементов */		
		*{
		margin: 0;		  
		padding: 0;		  
		outline: 0;		  
		}
		
		p{
		width: 300px;
		height: 50px;
		margin: 1em;
		border: solid 2px green;
		}
		/* Переопределяем вертикальные отступы */
		. p_1{
		margin-top: 5em;		
		margin-bottom: 10em;
		}
		
		.p_2{
		margin-top: 5em;
		}
		
		span{
		width: 50px;
		border: solid 2px violet;
		}		
		/* Внешние и внутренние отступы в одном объявлении */
		span.all_in_one{
		margin: 20px 20px 20px 20px;
		}		
		/* Внешние отступы по отдельности */
		span.separate{
		margin-top: 20px;
		margin-right: 20px;        
		margin-bottom: 20px;		
		margin-left: 20px;
		}
	 
	</style>
	
</head>
<body>
	<p>
		<!-- У строчных элементов вертикальные --> 
		<!-- внешние отступы не работают, а -->
		<!-- горизонтальные суммируются -->		
		<span>11111</span>
		<span>22222</span>
		<span>33333</span>		
	</p>
	<!-- У блочных элементов вертикальные --> 
	<!-- внешние отступы схлопываются до -->
	<!-- размера большего из них -->	
	<p>
		<span>11111</span>
		<span>22222</span>
		<span>33333</span>		
	</p>
		
</body>
</html>

Пример №4

Когда правильно padding, а когда margin?

Документация:

padding
margin

Сначала напомню читателям, о чём речь.

Документация:

padding
margin

Падинги (свойство padding) — это внутренние отступы от границ элемента до его содержимого. Маржины (свойство margin) — это внешние отступы от границ элемента до соседних элементов.