Стиль отступа свойства

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

margin Атрибут устанавливает или возвращает отступы элемента.

Этот атрибут может принимать от одного до четырех значений:

  • Одно значение, например: div {margin: 50px} - все четыре отступа равны 50px
  • Два значения, например: div {margin: 50px 10px} - верхний и нижний отступы 50px, левый и правый отступы 10px
  • Три значения, например: div {margin: 50px 10px 20px} - верхний отступ 50px, левый и правый отступы 10px, нижний отступ 20px
  • Четыре значения, например: div {margin: 50px 10px 20px 30px} - верхний отступ 50px, правый отступ 10px, нижний отступ 20px, левый отступ 30px

Свойства margin и padding вставляют пространство вокруг элемента. Однако, различие заключается в том, что margin вставляет пространство вокруг рамки, а padding вставляет пространство внутри рамки элемента.

См. также:

CSS учебник:Внешние поля CSS

CSS справочник:Свойство margin

Пример

Пример 1

Установить все четыре внешних отступа элемента <div>:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Попробуйте сами

Пример 2

Изменить все четыре внешних отступа элемента <div> на "25px":

document.getElementById("myDiv").style.margin = "25px";

Попробуйте сами

Пример 3

Возврат внешних отступов элемента <div>:

alert(document.getElementById("myDiv").style.margin);

Попробуйте сами

Пример 4

Разница между свойствами margin и padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Попробуйте сами

Синтаксис

Возврат свойства margin:

object.style.margin

Установка свойства margin:

object.style.margin = "%|length|auto|initial|inherit"

Значение атрибута

Значение Описание
% Определяет отступы как процент от ширины родительского элемента.
length Определяет отступы с помощью единицы измерения длины.
auto Браузер устанавливает отступы (все четыре отступа будут равны).
initial Этот атрибут устанавливается в значение по умолчанию. См. initial.
inherit Этот атрибут наследуется от родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: 0
Возвратное значение: Строка, представляющая внешние отступы элемента.
Версия CSS: CSS1

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка