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

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

Говоря об отступах, приходится иметь дело с двумя свойствами в CSS — margin и padding .

Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

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

box-model

Таким образом чтобы сформировать отступы между элементами правильно использовать — margin. Рассмотрим пример.

 class="box">Блок №1  class="box">Блок №2  class="box">Блок №3

Применив стили ниже, каждый из блоков получит отступ снизу в 25px

.box  background-color: #38d9a9; height: 100px; width: 125px; margin-bottom: 25px; >

margin

CSS свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top , margin-right , margin-bottom и margin-left .

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

Составные свойства

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

Синтаксис

/* Применяется ко всем четырём сторонам */ margin: 1em; margin: -3px; /* по вертикали | по горизонтали */ margin: 5% auto; /* сверху | горизонтально | снизу */ margin: 1em auto 2em; /* сверху | справа | снизу | слева */ margin: 2px 1em 0 auto; /* Глобальные значения */ margin: inherit; margin: initial; margin: unset;

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

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

Значения

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

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

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

Формальное определение

margin-bottom : 0
margin-left : 0
margin-right : 0
margin-top : 0

margin-bottom : процент, как указан, или абсолютная длина
margin-left : процент, как указан, или абсолютная длина
margin-right : процент, как указан, или абсолютная длина
margin-top : процент, как указан, или абсолютная длина

Правила организации отступов: как сделать вёрстку гибкой и не допустить ошибок

Если думаете, что знаете всё об отступах в вёрстке, — эта статья вас переубедит.

Иллюстрация: Merry Mary для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

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

Основные принципы работы с отступами

У любого сайта или документа есть «поток» — порядок вывода объектов в документе. В вёрстке поток идёт сверху вниз, слева направо. Именно поэтому, если какой-то элемент на макете находится справа, в HTML-коде он должен идти последним в своей группе.

Исходя из этого можно сформулировать первый принцип.

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

Это значит, что в вёрстке нужно стараться использовать CSS-свойства margin-right и margin-bottom, то есть отступ справа и отступ снизу.

Внешние отступы сверху и слева (margin-top и margin-left) заменяются на аналогичные внутренние отступы (padding) у родительского элемента.

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

2. Отступы задаются только между соседними элементами в потоке

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

Давайте взглянем на пример:

На скриншоте — простой блок: два списка, разделённые отступами.

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

На скриншоте типичная ошибка вёрстки: выпадение отступов. Отступ есть, но он не увеличивает размер «родителя» с голубым фоном.

3. Последнему элементу группы нужно обнулять отступ

Это легко сделать с помощью псевдоклассов в CSS. Например, с помощью :last-child, который позволяет выбрать последний элемент из группы.

В нашем случае мы найдём последний элемент списка. :last-child обнуляет отступ у последнего ul. Теперь всё работает как надо.

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

Выводы

Итак, повторим принципы работы с отступами:

Отступы задаются от предыдущего элемента к следующему.
Отступы задаются только между соседними элементами в потоке.
Последнему элементу группы нужно обнулять отступ.
Нельзя задавать отступы БЭМ-блокам.

Это четыре основных правила организации отступов, которые помогут вам сделать вёрстку качественной и гибкой. Главное — начать им следовать. Со временем их соблюдение войдёт в привычку, и вы будете понимать, где можно допустить ошибку и как её избежать.

Читайте также:

Vue.js: что такое, как он устроен и чем отличается от React
Планета-компьютер и системные требования Вселенной: разбираем предел Бремерманна
Три уровня кибербезопасности

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

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

CSS отступы

Отступы — это промежуток снаружи элемента за пределами любых установленных рамок.

У этого элемента есть отступ в 70px.

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

margin-top
margin-right
margin-bottom
margin-left

Все свойства отступов могут принимать следующие значения:

auto — значение отступа вычисляет браузер
ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
% — значение в процентах от ширины содержащего элемента
inherit — указывает на то, что значение должно наследоваться от родительского элемента

Также, можно использовать отрицательные значения.

В следующем примере установим отступы для всех четырех сторон элемента

margin — Краткая форма записи

Чтобы уменьшить код, все свойства определения отступов можно объединить в одно свойство.

CSS свойство margin является короткой формой записи следующих свойств определения отступов:

margin-top
margin-right
margin-bottom
margin-left

Это работает так:

Если у свойства margin определено четыре значения:

margin: 25px 50px 75px 100px;

верхний отступ 25px
правый отступ 50px
нижний отступ 75px
левый отступ 100px

Если у свойства margin определено три значения:

margin: 25px 50px 75px;

верхний отступ 25px
правый и левый отступы 50px
нижний отступ 75px

Если у свойства margin определено два значения:

margin: 25px 50px;

верхний и нижний отступы 25px
правый и левый отступы 50px

Если у свойства margin определено одно значение:

margin: 25px;

все четыре отступа 25px

Значение auto

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

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

Значение inherit

В следующем примере значение левого отступа элемента

наследуется от родительского элемента ():

 div < border: 1px solid red; margin-left: 100px; >p.ex1

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

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

Это происходит только с верхними и нижними отступами и не случается с левыми и правыми отступами!

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

 h1 < margin: 0 0 50px 0; >h2

Здесь у элемента нижний отступ установлен в 50px, а у элемента верхний отступ установлен в 20px.

Логика подсказывает, что вертикальный отступ между элементами и должен быть 70px (50px + 20px). Однако из-за схлопывания отступов действительный вертикальный отступ между этими элементами будет 50px.

CSS поля

Поля — это промежуток вокруг содержимого элемента внутри любых установленных рамок.

У этого элемента есть поля в 70px.

В CSS есть свойства, позволяющие определять поле для каждой стороны элемента:

padding-top
padding-right
padding-bottom
padding-left

Все свойства полей могут принимать следующие значения:

ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
% — значение в процентах от ширины содержащего элемента
inherit — указывает на то, что значение должно наследоваться от родительского элемента

Внимание! Отрицательные значения не допустимы.

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

padding — Краткая форма записи

Чтобы уменьшить код, все свойства определения полей можно объединить в одно свойство.

CSS свойство padding является короткой формой записи следующих свойств определения полей:

padding-top
padding-right
padding-bottom
padding-left

Это работает так:

Если у свойства padding определено четыре значения:

padding: 25px 50px 75px 100px;

верхнее поле 25px
правое поле 50px
нижнее поле 75px
левое поле 100px

Если у свойства padding определено три значения:

padding: 25px 50px 75px;

верхнее поле 25px
правое и левое поля 50px
нижнее поле 75px

Если у свойства padding определено два значения:

padding: 25px 50px;

верхнее и нижнее поля 25px
правое и левое поля 50px

Если у свойства padding определено одно значение:

padding: 25px;

все четыре поля 25px

Ширина полей и элемента

CSS свойство width определяет ширину области с содержимым элемента. Область с содержимым — это пространство внутри полей, рамок и отступов элемента (блочная модель).

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

В следующем примере для элемента устанавливается ширина в 300px. Однако реальная ширина элемента будет 350px (300px + 25px левого поля + 25px правого поля):

Чтобы ширина была 300px без учета полей, можно использовать свойство box-sizing . Это будет определять реальную ширину элемента — если ширина полей будет увеличиваться, доступное пространство содержимого будет уменьшаться.

В своем файле таблиц стилей измените код CSS для тега следующим образом:

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

Все CSS свойства определения отступов и полей

Свойство	Описание
margin	Короткое свойство, определяющее размер всех отступов элемента за одну декларацию
margin-bottom	Определяет размер нижнего отступа элемента
margin-left	Определяет размер левого отступа элемента
margin-right	Определяет размер правого отступа элемента
margin-top	Определяет размер верхнего отступа элемента
padding	Короткое свойство, определяющее размер всех полей элемента за одну декларацию
padding-bottom	Определяет размер нижнего поля элемента
padding-left	Определяет размер левого поля элемента
padding-right	Определяет размер правого поля элемента
padding-top	Определяет размер верхнего поля элемента