files/ru/web/css/margin-left/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

---
title: margin-left
slug: Web/CSS/margin-left
translation_of: Web/CSS/margin-left
---
<div>{{CSSRef()}}</div>

<p>Свойство <a href="/en/CSS" title="CSS">CSS</a>  <strong><code>margin-left</code></strong> устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">внешний отступ</a> слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>

<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>

<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>

<p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p>

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

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="brush:css no-line-numbers">/* &lt;длина&gt; значения */
margin-left: 10px;  /* абсолютная длина */
margin-left: 1em;   /* относительно размера текста */
margin-left: 5%;    /* относительно ширины родительского блока */

/* Значения-ключевые слова */
margin-left: auto;

/* Глобальные значения */
margin-left: inherit;
margin-left: initial;
margin-left: unset;
</pre>

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

<h3 id="Values" name="Values">Значения</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Размер отступа - фиксированная величина.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
 <dt><code>auto</code></dt>
 <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Значение {{cssxref("display")}}</th>
    <th scope="col">Значение {{cssxref("float")}}</th>
    <th scope="col">Значение {{cssxref("position")}}</th>
    <th scope="col" style="vertical-align: middle;">
     <p>Расчётное значение <code>auto</code></p>
    </th>
    <th scope="col">Комментарий</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
    <th><em>любое</em></th>
    <th><code>static</code> или <code>relative</code></th>
    <td><code>0</code></td>
    <td>Строчный способ разметки</td>
   </tr>
   <tr>
    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
    <th><em>любое</em></th>
    <th><code>static</code> или <code>relative</code></th>
    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае устанавливается значение, центрирующее элемент внутри его родителя</td>
    <td>Блочный способ разметки</td>
   </tr>
   <tr>
    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
    <th><code>left</code> или <code>right</code></th>
    <th><code>static</code> или <code>relative</code></th>
    <td><code>0</code></td>
    <td>Блочный способ разметки (плавающие элементы)</td>
   </tr>
   <tr>
    <th><em>любое </em><code>table-*</code><em>, кроме </em><code>table-caption</code></th>
    <th><em>любое</em></th>
    <th><em>любое</em></th>
    <td><code>0</code></td>
    <td>Внутренние <code>table-*</code> элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}</td>
   </tr>
   <tr>
    <th><em>любое, кроме <code>flex</code>,</em> <code>inline-flex</code><em>, или </em><code>table-*</code></th>
    <th><em>любое</em></th>
    <th><em><code>fixed</code></em> или <code>absolute</code></th>
    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае, устанавливается значение центрирующее границы области внутри доступной  <code>width</code> (ширины), если  значение фиксировано.</td>
    <td>Способ разметки абсолютным позиционированием</td>
   </tr>
   <tr>
    <th><code>flex</code>, <code>inline-flex</code></th>
    <th><em>любое</em></th>
    <th><em>любое</em></th>
    <td><code>0</code>, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным <code>auto</code> отступам.</td>
    <td>Способ разметки с помощью flexbox</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

<pre class="syntaxbox">{{csssyntax()}}</pre>

<h2 id="Examples" name="Examples">Примеры</h2>

<pre class="brush: css">.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
</pre>

<h2 id="Specifications" name="Specifications">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}</td>
   <td>{{Spec2('CSS3Box')}}</td>
   <td>
    <p><br>
     Нет значительных изменений относительно CSS 2.1.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Определяет <code>margin-left</code> как анимируемое.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>
    <p><br>
     Определяет влияние <code>margin-left</code> на flex-элементы.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Идентично CSS1, но удалено влияние на строчные элементы.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Первоначальное определение.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>

<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>

<p>{{Compat("css.properties.margin-left")}}</p>