margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора равное нулю.
Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
margin: [значение | проценты | auto] | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
| Число значений | Результат |
|---|---|
| 1 | Отступы будут установлены одновременно от каждого края элемента. |
| 2 | Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого. |
| 3 | Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края. |
| 4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. |
Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
margin Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin
Объектная модель
[window.]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 );
- для строчных элементов;
- для .
Отступы в CSS (margin и padding)
В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором — внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.
Внешний отступ (margin)
Для демонстрации отступа нам потребуется два блока div. Создадим их:
Как можно догадаться, внешний блок ограничивает ширину внутреннего. А внутренний ограничивает высоту внешнего. Чтобы различать блоки, подкрасим их рамки: внутренний будет красным, внешний синим. Получится такой результат:
Как видно из примера, рамки совпадают, потому что нет отступов. Теперь сделаем внешний отступ в 10px для внутреннего, красного, элемента так:
На странице браузера получится такой результат:
- margin-left — отступ слева
- margin-right — отступ справа
- margin-top — отступ сверху
- margin-bottom — отступ снизу
Получится такой результат:
Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.
Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.
С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.
Попробуем продемонстрировать эту центровку:
В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:
Этот приём центрирования используется практически на всех сайтах, на которых контент расположен в центре экрана.
Внутренний отступ (padding)
Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха. Результат будет таким:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
- padding-left — отступ слева
- padding-right — отступ справа
- padding-top — отступ сверху
- padding-bottom — отступ снизу
Проблема расширения (box-sizing)
У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:
Без отступа С отступом В браузере получится такой результат:
Без отступаС отступом
Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):
Без отступа С отступом Тогда вместо того, чтобы раздвигать границы элемента, будет сужаться область внутри него.
Без отступаС отступом
Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .
Отступы и поля
Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры — отступы и поля. 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 Определяет размер верхнего поля элемента Изучаем поля и отступы в CSS на примере четырех HTML-элементов
HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей ( рамкой ) указанного HTML-элемента .
Разницу между полем и отступом можно увидеть на следующем рисунке:
Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.
Посмотреть демо-версию и код
У нас есть три элемента div . Первые два — со свойством HTML margin , а третий — со свойством padding . Расстояние между элементами div — это margin , а пространство между текстом внутри третьего элемента div и линией его границы — это padding .
Отступы в CSS — cинтаксис CSS-свойств padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin :
margin: 50px;
Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
margin: 10px 20px 50px 100px;
- 10px — отступ сверху CSS;
- 20px — отступ справа CSS;
- 30px — отступ снизу CSS;
- 40px — отступ слева CSS .
Также можно установить отступ слева CSS и другие направления отдельно:
margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
Примечание: Можно использовать для определения отступа px , pts , cm и т.д.
Синтаксис CSS-свойства padding
Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.
Единичное объявление с одним значением:
padding: 50px;
Для каждого направления одиночным объявлением:
padding: 10px 20px 50px 100px;
Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin .
Для каждого направления в отдельности:
padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;
Пример для установки полей и отступов в HTML-списке
Во вступительной части я показал свойства margin и padding , используемые в элементе div . В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div . Он содержит пункты меню в виде гиперссылок.
Список задается и другими свойствами CSS , но без использования свойств HTML margin и padding он будет выглядеть так:
Посмотреть демо-версию и код
padding: 10px;
мы получим следующий вид:
Посмотреть онлайн демо-версию и код
Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:
Посмотреть онлайн демо-версию и код
padding: 10px; margin: 2px; text-decoration: none; color: #fff; background-color: #DA8119; display:block;
Демонстрация полей на примере HTML-таблицы
Ниже приводится пример использования свойства padding в HTML-таблице . Я создал таблицу с несколькими строками.
Для таблицы заданы стили с помощью различных свойств CSS . Сначала посмотрите, как выглядит таблица без применения свойства padding :
Посмотреть демо-версию и код
Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:
Посмотреть демо-версию и код
padding: 20px; border: dashed 1px #DF7000; background: #D0E8AC; color: #000;
Пример использования полей и отступов с элементом form
Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.
Свойство padding , примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.
Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding :
Добавив поля к классу текстовых полей и классу кнопки btn , мы получим форму, выглядящую следующим образом:
Поля для текстовых полей:
padding: 10px;
Поля для кнопки:
padding: 9px 15px;
Посмотреть демо-версию и код
Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin . В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.
margin: -3px;
Поля формы будут выглядеть следующим образом:
Посмотреть демо-версию и код
После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.
Использовав свойство padding , мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.
Для кнопки “ Save ” мы также применили свойство padding :
padding: 9px 15px;
которое используется для выравнивания текста во всех направлениях.