Как сделать отступ снизу css

margin-bottom

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

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

Синтаксис

margin-bottom: значение | auto | inherit

Значения

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet 
 
  

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

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

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

[window.]document.getElementById(» elementID «).style.marginBottom

Браузеры

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

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

Как сделать отступ снизу в css

Если нужен отступ самого блока от других, то используют margin-bottom , а если отступ контента блока от его границ, то padding-bottom .

.content  margin-bottom: 5px; padding-bottom: 5px; > 

margin-bottom

Свойство CSS margin-bottom устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное — сокращает.

Интерактивный пример

Это свойство не имеет воздействия на незамещаемые элементы, такие как или .

Синтаксис

/* числовые значения */ margin-bottom: 10px; /* Абсолютная длина */ margin-bottom: 1em; /* относительно размера текста */ margin-bottom: 5%; /* относительно длины родительского блока */ /* Значения-ключевые слова */ margin-bottom: auto; /* Глобальные значения */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; 

Свойство margin-bottom может быть выражено как ключевое слово auto , или как , или как . Значение может быть положительным, нулевым или отрицательным.

Значения

Размер отступа — фиксированная величина.

Размер отступа в процентах — размер относительно длины родительского блока.

Браузер сам выбирает, какое значение использовать. Смотрите margin .

Формальный синтаксис

margin-bottom =
| (en-US)
auto

=
| (en-US)

Пример

HTML

div class="container"> div class="box0">Блок 0div> div class="box1">Блок 1div> div class="box2">Отрицательное значение margin Блока 1 тянет меня вверхdiv> div> 

CSS

CSS устанавливает нижний отступ и высоту для элементов div .

.box0  margin-bottom: 1em; height: 3em; > .box1  margin-bottom: -1.5em; height: 4em; > .box2  border: 1px dashed black; border-width: 1px 0; margin-bottom: 2em; > 

Несколько дополнений к свойствам элемента div и элемента класса container сделают более наглядным эффект использования свойства margin .

.container  background-color: orange; width: 320px; border: 1px solid black; > div  width: 320px; background-color: gold; > 

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

Specification
CSS Box Model Module Level 3 # margin-physical

Начальное значение	0
Применяется к	все элементы, кроме элементов с табличным типом display , отличным от table-caption , table и inline-table . Это также применяется к ::first-letter и ::first-line .
Наследуется	нет
Проценты	ссылается на ширину содержащего блока
Обработка значения	процент, как указан, или абсолютная длина
Animation type	длина

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

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Внешние отступы

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

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

        
Первый блок
 
 
Второй блок
 
 
Третий блок
 
   

Можно вместо четырех свойств задать одно:

Свойство задается в формате:

margin: отступ_сверху отступ_справа отступ_снизу отступ_слева;

Если значения для всех четырех отступов совпадает, то мы можем указать только одно значение:

В этом случае для всех четырех отступов будет использоваться 25 пикселей.

Для установки отступов можно использовать точные значения в пикселях (px) или em, либо процентные отношения, либо значение auto (автоматическая установка отступов).

margin-left: 2em;

Значение 2em определяет расстояние, которое в два раза больше размера шрифта элемента. При использовании процентов веб-браузеры вычисляют размер отступов на основе ширины элемента-контейнера, в который заключен стилизуемый элемент. В то же время, если несколько элементов у нс соприкасаются, то браузер выбирает наибольший отступ элемента, который затем и используется. Так, выше в примере использовался следующий стиль:

Между первым и вторым блоками расстояние будет равно 30 пикселям — значение свойства margin-top второго блока div, несмотря на то, что у первого блока div имеется свойство margin-bottom, равное 15 пикселям.

Читайте также Линейный градиент CSS

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.