From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/margin/index.html | 246 +++++++++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 files/ru/web/css/margin/index.html (limited to 'files/ru/web/css/margin') diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html new file mode 100644 index 0000000000..d149b8cc5f --- /dev/null +++ b/files/ru/web/css/margin/index.html @@ -0,0 +1,246 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference + - справочник +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

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

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

{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Синтаксис

+ +

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

+ + + +

Значения

+ +
+
{{cssxref("length")}}
+
Размер отступа как фиксированное значение.
+
{{cssxref("percentage")}}
+
Размер отступа в процентах относительно ширины родительского блока.
+
auto
+
Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Простой пример

+ +

HTML

+ +
<div class="center">Этот элемент отцентрирован.</div>
+
+<div class="outside">Этот элемент расположен за пределами своего контейнера.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example','100%',120) }}

+ +

Больше примеров

+ +
margin: 5%;                 /* все стороны:  отступ 5% */
+
+margin: 10px;               /* все стороны:  отступ 10px */
+
+margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
+                            /* право и лево: отступ 20px */
+
+margin: 10px 3% 1em;        /* верх:         отступ 10px */
+                            /* право и лево: отступ 3% */
+                            /* низ:          отступ 1em */
+
+margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
+                            /* право:  отступ 3px */
+                            /* низ:    отступ 30px */
+                            /* лево:   отступ 5px */
+
+margin: 2em auto;           /* верх и низ: отступ 2em */
+                            /* блок отцентрирован горизонтально */
+
+margin: auto;               /* верх и низ: отступ 0 */
+                            /* блок отцентрирован горизонтально */
+
+ +

Примечание

+ +

Горизонтальное выравнивание

+ +

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать display: flex; justify-content: center; .

+ +

Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте margin: 0 auto; .

+ +

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

+ +

Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри Схлопывание внешних отступов для получения большей информации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Нет значительных изменений.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}margin определён как анимируемый.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Устраняет его влияние на строковые (inline) элементы..
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Первоначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.margin")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf