freeCodeCamp/guide/russian/css/margins/index.md

4.1 KiB
Raw Blame History

title localeTitle
Margins Маржа

Маржа

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

Значения маржи устанавливаются с использованием длины или процентов или auto или inherit ключевого слова и могут принимать нулевые или отрицательные значения. Начальное, или по умолчанию, значение для всех свойств полей равно 0. В то время как вы можете использовать inherit ключевое слово , но оно не может быть использовано вместе со значением длины.

Синтаксис

.element { 
    margin: margin-top || margin-right || margin-bottom || margin-left; 
 } 

Это свойство может быть указано с использованием одного, двух, трех или четырех значений.

  • Когда задано одно значение, он применяет одинаковый запас ко всем четырем сторонам.
  • Когда указаны два значения, первое поле применяется к верхнему и нижнему, второе - к левому и правому.
  • Когда указаны три значения, первое поле применяется к верхнему, второе - к левому и правому, третье - к нижней.
  • Когда указаны четыре значения, поля применяются к верхнему, правому, нижнему и левому в этом порядке (по часовой стрелке).
/* Apply to all four sides */ 
 margin: 1em; 
 
 /* top and bottom | left and right */ 
 margin: 5% 10%; 
 
 /* top | left and right | bottom */ 
 margin: 1em 2em 2em; 
 
 /* top | right | bottom | left */ 
 margin: 5px 1em 0 1em; 

Где в коробке

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

Модель CSS Box

Свертывание полей

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

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

Он эффективно поддерживается во всех браузерах (с IE6 +, Firefox 2+, Chrome 1+ и т. Д.),

Больше информации