Как сделать отступ margin
Обновлено: 07.07.2024
Сейчас мы с вами будем разбираться со свойствами margin и padding, которые задают отступы между элементами сайта. Давайте посмотрим, в чем между ними разница и как эти свойства применяются на практике.
Блок . Свойство margin
Итак, свойство margin задает отступ снаружи от границы элемента.
Давайте посмотрим, как это выглядит на практике.
Для начала приведу вам два вложенных друг в друга блока без margin (они слипнутся и мы увидим двойную границу):
Так код будет выглядеть в браузере:
А теперь давайте зададим margin в 30px внутреннему блоку:
Так код будет выглядеть в браузере:
Для определенной стороны
Отступ margin можно также задавать для определенных сторон. Для этого существуют следующие свойства: свойство margin-left для левого отступа, margin-right для правого, margin-top для верхнего и margin-bottom для нижнего.
Давайте поставим левый отступ в 30px с помощью margin-left:
Так код будет выглядеть в браузере:
А теперь верхний отступ в 30px с помощью margin-top:
Так код будет выглядеть в браузере:
А сейчас одновременно правый отступ 30px с помощью margin-right и нижний отступ 10px с помощью margin-bottom
Так код будет выглядеть в браузере:
Блок . Альтернативный вариант для разных сторон
Подобно другим свойствам CSS, свойство margin может принимать не только одно значения, но и два, три или четыре. В этом случае разные значения задают отступы для разных сторон.
Четыре значения
Давайте посмотрим на примере, как работает margin, когда ему задано четыре значения. Пусть у нас сделано так: margin: 10px 20px 30px 40px. В этом случае 10px это отступ сверху, 20px - справа, 30px - снизу, 40px - слева. То есть мы начинаем сверху и идем по часовой стрелке: верх-право-низ-лево.
Этому правилу следует подавляющее большинство CSS свойств (кроме border-radius, у него все начинается с верхнего левого угла и тоже идет по часовой стрелке, то есть, в принципе, и тут все похоже).
Так код будет выглядеть в браузере:
Два значения
Если передать свойству margin два значения, то первое будет задавать отступ одновременно сверху и снизу, а второе - одновременно и справа, и слева.
Давайте посмотрим пример:
Так код будет выглядеть в браузере:
Три значения
Ну, и наконец, если передать свойству margin три значения, то первое будет задавать отступ сверху, третье - отступ снизу, а второе - одновременно отступ слева и справа.
Давайте посмотрим пример:
Так код будет выглядеть в браузере:
Значение auto
Свойство margin применяется не только для задания отступов, но и для центрирования блочных элементов. Для этого правый и левый margin следует задать в значение auto.
В примере ниже внутренний блок станет по центру:
Так код будет выглядеть в браузере:
Имейте ввиду, что таким образом можно центрировать только блочные элементы (для строчных используйте text-align), только по горизонтали и только, если им задана ширина.
Давайте перепишем пример в сокращенной форме через одно свойство-сокращение margin (первое значение будет задавать верх-низ, а втрое - право-лево):
Так код будет выглядеть в браузере:
Если нам нужны разные верхний и нижний отступ margin, то можно передать три значения: первое задаст верхний отступ, третье - нижний, а второе задаст значение auto для правого и левого отступов:
Так код будет выглядеть в браузере:
В принципе, можно написать и четыре значения таким образом: margin: 30px auto 10px auto, но с тремя значениями писать все-таки меньше (зато сложнее понять).
Блок . Свойство padding
Мы с вами разобрали свойство margin, которое делает отступ наружу от границы. Существует также очень похожее свойство padding, которое делает отступ вовнутрь от границы.
Работает оно по такому же принципу - есть свойства padding-left, padding-right, padding-top и padding-bottom, которые задают отступ для разных сторон. Также для свойства padding можно задавать 1, 2, 3 или 4 значения по такому же принципу, как и в margin.
Единственное отличие - это то, что значения auto для свойства padding не существует.
Давайте теперь посмотрим на примерах, как работает свойство padding. Для начала приведу блок без отступов (у него текст прилип к границам):
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
А теперь зададим padding в 30px для всех сторон:
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Свойство padding для определенной стороны
Давайте зададим отступы, используя padding-left, padding-right, padding-top и padding-bottom:
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Блок . Свойство padding для разных сторон
Следующие примеры показывают, как работает padding, если передать ему два, три или четыре параметра. В этих случаях он работает аналогично свойству margin, поэтому комментариев к примерам я не буду делать, просто изучите их:
Четыре значения
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Два значения
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Три значения
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Блок . Расширение элемента
По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть и padding, и border расширяют блок (и по ширине, и по высоте).
В следующем примере оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого - нет. Посмотрите, как отличаются их размеры:
А сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 20px, а у первого - нет. Посмотрите, как отличаются их размеры:
Блок . Свойства outline и box-sizing
Изучите внимательно эти свойства по ссылкам, в дальнейшем они вам пригодятся.
Блок . Работа с маркерами списков
Мы с вами еще в начале книги разбирались со списками ul и ol и вы наверняка помните о том, что список ul имеет маркеры в виде точек, а ol - в виде цифр. Однако, вид этих маркеров можно сменить или даже убрать их совсем.
Например, для списка ul можно сделать маркеры в виде квадратов или кружков, а для списка ol - нумерацию не только в виде цифр, а в виде латинских или греческих букв.
Делается это с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ul:
Значение square
Значение square позволяет сделать маркеры в виде квадратиков:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Значение circle
Значение circle позволяет сделать маркеры в виде кружков:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Значение disc
Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Значение none
Значение none убирает маркеры совсем:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Значения для списка ol
Для списка ol дело обстоит аналогичным образом, только там применяются свои значения. Давайте, например, вместо обычных цифр сделаем римские:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
А теперь сделаем нумерацию не числами, а маленькими латинскими буквами:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Весь список возможных значений для ol очень большой и я не буду приводить его здесь. Смотрите его в справочнике CSS для свойства list-style-type.
Блок . Маркер в виде картинки
Можно также задавать свои маркеры. Для этого необходимо иметь картинку, которую вы бы хотели сделать для маркеров списка, и подключить ее с помощью свойства list-style-image: url("путь к картинке").
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Блок . Позиция маркеров списков
По умолчанию маркеры списка не входят в сам список .
Чтобы понять, что имеется ввиду, давайте разберем следующий пример. В данном случае тегу ul обнулен padding и, казалось бы, маркеры списка должны прижиматься к границе блока, но они вылазят наружу! Это говорит о том, что не они реагируют на padding, а текст списка:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Такое поведение можно поменять, если воспользоваться свойством list-style-position, которое принимает два значения: outside (то, что мы видим по умолчанию) и значение inside, которое делает так, что маркеры оказываются внутри списка:
Так код будет выглядеть в браузере:
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Четвертый пункт.
- Пятый пункт.
Блок . Свойство list-style
Существует также свойство-сокращение list-style, которое позволяет одновременно задать тип маркера, его позицию и картинку.
Блок . Ограничение высоты и ширины
Блок . Свойство display
Посмотрите видео по работе со свойством display. Это нужно сделать обязательно, иначе вы не сможете решать практические задачи.
Блок . Свойство float
Посмотрите видео по работе со свойством float. Это нужно сделать обязательно, иначе вы не сможете решать практические задачи.
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Когда мы начинаем изучать 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.
В итоге расстояние между первым и вторым элементом — 50 px, потому что меньший margin в 20 px поглотился большим. А отступ между вторым и третьим элементами — 3 em, потому что 3 em больше, чем 20 px (нижний margin второго элемента).
Полностью пустые блоки
Если блок пустой, его внешние отступы (верхний и нижний) могут схлопнуться друг с другом. В следующем примере элемент с классом empty имеет верхний и нижний margin (по 50 px каждый). Но в итоге расстояние между первым и третьим элементами не 100 px, а 50 px. Так получилось, потому что верхний и нижний отступы схлопнулись. Если в этот пустой блок добавить что-нибудь (хотя бы даже внутренний отступ — padding), схлопывание внешних отступов не произойдет.
Родительский элемент и первый или последний потомок
Этот сценарий чаще всего застает людей врасплох, потому что он не то чтобы сильно интуитивен. В следующем примере у нас есть элемент div с классом wrapper . Также ему назначена красная обводка, чтобы его было лучше видно. Все три элемента-потомка имеют margin в 50 px (т. е., внешние отступы со всех сторон). Но в результате мы не получаем отступа от верхней и нижней границы родительского элемента.
Так происходит потому, что внешний отступ элемента-потомка схлопывается с любым отступом родительского и оказывается за пределами родительского элемента. Вы можете это наблюдать, воспользовавшись DevTools. Выделенная желтая область — это margin.
Схлопываются только вертикальные отступы
Последний пример демонстрирует еще кое-что, касающееся схлопывания. В CSS2 указано, что схлопываются только отступы по вертикали, т. е., верхний и нижний margin. В приведенном примере мы видим, что отступы слева и справа не схлопнулись с родительскими и не оказались за пределами родительского блока.
Примечание. Стоит помнить, что отступы схлопываются только в блочном направлении, например, между абзацами.
Что может предотвратить схлопывание внешних отступов
Внешние отступы никогда не схлопываются, если у элемента задано абсолютное позиционирование или если элемент плавающий. Но предположим, что у вас одна из ситуаций, которые мы разбирали выше. Как в таких случаях не дать отступам схлопнуться?
Начнем с того, что схлопывание не произойдет, если поместить что-то между рассматриваемыми элементами.
Например, отступы совершенно пустого блока не схлопнутся с отступами верхнего и нижнего блоков, если этот пустой блок имеет границу или внутренний отступ. В приведенном ниже примере я добавила в пустом блоке padding в 1 px. Теперь над ним и под ним появились внешние отступы в 50 px.
За таким поведением стоит определенная логика. Если блок совершенно пуст, не имеет обозначенных границ или внутренних отступов, он попросту невидимый. Это может быть, например, пустой абзац, добавленный в разметку вашей CMS. Если ваша CMS добавляет лишние элементы вроде абзацев, вы, вероятно, не захотите, чтобы из-за этого появлялись огромные промежутки между абзацами (а они появились бы благодаря отступам). Добавьте в пустой блок что угодно — и вы получите эти промежутки.
Аналогичное поведение мы можем наблюдать у отступов первого и последнего потомка, которые схлопываются с родительскими отступами. Если мы добавим границу (border) для родительского элемента, отступы элементов-потомков останутся внутри.
Опять же, за этим поведением стоит некоторая логика. Если у вас есть неотображаемые визуально элементы-обертки, добавленные с семантическими целями, вы вряд ли захотите, чтобы из-за них появлялись большие промежутки. Это было особенно важно, когда веб был преимущественно текстовым. Подобное поведение менее ценно, когда мы используем элементы для создания дизайна.
Создание блочного контекста форматирования
Новый блочный контекст форматирования также предотвращает схлопывание внешних отступов. Если мы вернемся к примеру с первым и последним потомком, когда внешние отступы выходили за пределы wrapper, и установим для wrapper свойство display: flow-root , это создаст новый блочный контекст форматирования и в результате отступы останутся внутри обертки.
Если хотите узнать больше о свойстве 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 верхнего отступа другого).
Стратегии использования 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.
В этой статье мы все время говорили о вертикальных отступах. Но в современном CSS появилась тенденция говорить о направлении в относительном ключе, а не в физическом смысле. Говоря о вертикальных отступах, мы на самом деле говорим об отступах в блочном измерении. Они могут быть верхними и нижними — если мы в horizontal writing mode (когда чтение идет слева направо и сверху вниз), но в vertical writing mode отступы становятся левыми и правыми.
Что касается внешних отступов, у нас есть следующие варианты (если мы работаем с английским языком и прочими языками, где чтение текста идет слева направо):
- margin-top = margin-block-start
- margin-right = margin-inline-end
- margin-bottom = margin-block-end
- margin-left = margin-inline-start
У нас также есть два новых стандарта, позволяющие устанавливать оба блочных и оба строчных отступа:
Дополнительно по теме логических свойств и значений можно почитать вот эту статью или MDN.
Итоги
Теперь вы знаете большую часть того, что вообще стоит знать о внешних отступах! Кратко повторим:
CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют "внешний отступ" или "поле") от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.
Свойство margin обеспечивает краткий метод установки значений сразу нескольких свойств внешнего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внешний отступ устанавливается начиная с верхней позиции:
Визуальный эффект будет зависеть от количества заданных значений:
- margin:10px 5px 15px 20px;
- Верхнее поле - 10px
- Правое поле - 5px
- Нижнее поле - 15px
- Левое поле - 20px
Внешний отступ по горизонтали может быть установлен и для блочных и для строчных элементов, а по вертикали только для блочных элементов.
Объединение вертикальных полей
- Поля сестринских элементов расположенных друг под другом и находящихся в потоке документа объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px, а нижнего элемента (margin-top) - 20px, единое поле в этом случае будет высотой 20px.
- Объединение полей родительского и дочернего элемента находящихся в потоке документа происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto. Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.
Для установки внешних отступов отдельно для каждой стороны элемента, используются следующие свойства: margin-top, margin-bottom, margin-left, margin-right.
Свойство margin задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.
Объединение отступов
Вертикальные отступы поглощают друг друга, горизонтальные – нет.
Например, вот документ с вертикальными и горизонтальными отступами:
Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.
А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.
Отрицательные margin-top/left
Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.
В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.
То есть, элемент продолжает полноценно участвовать в потоке.
Пример: вынос заголовка
Например, есть документ с информационными блоками:
Использование отрицательного margin-top позволяет вынести заголовки над блоком.
Читайте также: