files/ru/web/css/margin-right/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

---
title: margin-right
slug: Web/CSS/margin-right
translation_of: Web/CSS/margin-right
---
<div>{{CSSRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/css/margin-right.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> </p>

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

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

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

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

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

<h3 id="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">Расчётное значение<br>
     <code>auto</code></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>

{{csssyntax}}

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

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

<h2 id="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-right') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>Нет значительных изменений.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Определяет <code>margin-right</code> как анимируемое.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
   <td>{{ Spec2('CSS3 Flexbox') }}</td>
   <td>Определяет влияние <code>margin-right</code> на flex-элементы.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Удалено влияние на строчные элементы.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Первоначальное определение.</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Browser_Compatibility">Поддержка браузерами</h2>
<p>{{Compat("css.properties.margin-right")}}</p>