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-left/index.html | 167 ++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/ru/web/css/margin-left/index.html (limited to 'files/ru/web/css/margin-left') diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html new file mode 100644 index 0000000000..cf6558067a --- /dev/null +++ b/files/ru/web/css/margin-left/index.html @@ -0,0 +1,167 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +translation_of: Web/CSS/margin-left +--- +
{{CSSRef()}}
+ +

Свойство CSS  margin-left устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

+ +
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
+ + + +

Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.

+ +

В редких случаях, когда ширина (т.е., когда все значения width, margin-left, border, padding, область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .

+ +

Синтаксис

+ +
/* <длина> значения */
+margin-left: 10px;  /* абсолютная длина */
+margin-left: 1em;   /* относительно размера текста */
+margin-left: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-left: auto;
+
+/* Глобальные значения */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

Свойство margin-left может быть выражено как ключевое слово auto, как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Размер отступа - фиксированная величина.
+
{{cssxref("<percentage>")}}
+
Размер отступа в процентах - размер относительно длины родительского блока.
+
auto
+
Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Значение {{cssxref("display")}}Значение {{cssxref("float")}}Значение {{cssxref("position")}} +

Расчётное значение auto

+ 		Комментарий
inline, inline-block, inline-tableлюбоеstatic или relative0Строчный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-captionлюбоеstatic или relative0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителяБлочный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft или rightstatic или relative0Блочный способ разметки (плавающие элементы)
любое table-*, кроме table-captionлюбоелюбое0Внутренние table-* элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}
любое, кроме flex, inline-flex, или table-*любоеfixed или absolute0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной  width (ширины), если  значение фиксировано.Способ разметки абсолютным позиционированием
flex, inline-flexлюбоелюбое0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.Способ разметки с помощью flexbox
+
+
+ +

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

+ +
{{csssyntax()}}
+ +

Примеры

+ +
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3Box')}} +


+ Нет значительных изменений относительно CSS 2.1.

+
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}Определяет margin-left как анимируемое.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}} +


+ Определяет влияние margin-left на flex-элементы.

+
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}Идентично CSS1, но удалено влияние на строчные элементы.
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

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

+ + + +

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

-- cgit v1.2.3-54-g00ecf