diff options
Diffstat (limited to 'files/ru/web/css/margin')
| -rw-r--r-- | files/ru/web/css/margin/index.html | 246 |
1 files changed, 246 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p> + +<pre class="brush:css no-line-numbers">/* Применяется ко всем четырём сторонам */ +margin: 1em; + +/* по вертикали | по горизонтали */ +margin: 5% auto; + +/* сверху | горизонтально | снизу */ +margin: 1em auto 2em; + +/* сверху | справа | снизу | слева */ +margin: 2px 1em 0 auto; + +/* Глобальные значения */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<div class="hidden" id="margin"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="cell"> + <div class="m m0">margin: 0</div> + </div> + <div class="cell"> + <div class="m m1">margin: 1em</div> + </div> + <div class="cell"> + <div class="m m2">margin: 5% auto</div> + </div> + <div class="cell"> + <div class="m m3">margin: 1em auto 2em</div> + </div> + <div class="cell"> + <div class="m m4">margin: 5px 1em 0 auto</div> + </div> + <div class="note">Все вышеприведенные блоки имеют одинаковую ширину 50%</div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: center; + flex: none; +} + +.m { + display: block; + width: 50%; + text-align: left; + background: #E4F0F5; + padding: .5em; + border: 1px solid; +} + +.m0 { margin: 0; } +.m1 { margin: 1em; } +.m2 { margin: 5% auto; } +.m3 { margin: 1em auto 2em; } +.m4 { margin: 5px 1em 0 auto; }</pre> +</div> + +<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <code><a href="#<length>"><length></a></code>, <code><a href="#<percentage>"><percentage></a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p> + +<ul> + <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырех сторон</strong>.</li> + <li>Когда определены <strong>два</strong> значения, то первое значение определяет внешний отступ для <strong>верхней и нижней</strong> стороны, а второе значение определяет отступ для <strong>левой и правой стороны</strong>.</li> + <li>Когда определены <strong>три</strong> значение, то первое значение определяет внешний отступ для <strong>верхней</strong> стороны, второе значение определяет внешний отступ для <strong>левой и правой стороны</strong>, а третье значение определяет отступ для <strong>нижней</strong> стороны.</li> + <li>Когда определены <strong>четыре</strong> значения, они определяют внешние отступы для <strong>верхней</strong> стороны, <strong>справа</strong>, <strong>снизу</strong> и <strong>слева</strong> в рассмотренном порядке (по часовой стрелке).</li> +</ul> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><strong>{{cssxref("length")}}</strong></dt> + <dd>Размер отступа как фиксированное значение.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>Размер отступа в процентах относительно ширины родительского блока.</dd> + <dt><code>auto</code></dt> + <dd>Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="center">Этот элемент отцентрирован.</div> + +<div class="outside">Этот элемент расположен за пределами своего контейнера.</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,8]">.center { + margin: auto; + background: lime; + width: 66%; +} + +.outside { + margin: 3rem 0 0 -3rem; + background: cyan; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p> + +<h3 id="Больше_примеров">Больше примеров</h3> + +<pre class="brush: css">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 */ + /* блок отцентрирован горизонтально */ +</pre> + +<h2 id="Примечание">Примечание</h2> + +<h3 id="Горизонтальное_выравнивание">Горизонтальное выравнивание</h3> + +<p>Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать <code><a href="/ru/docs/Web/CSS/display">display</a>: flex; <a href="/ru/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p> + +<p>Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте <code>margin: 0 auto;</code> .</p> + +<h3 id="Схлопывание_отступов">Схлопывание отступов</h3> + +<p>Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> для получения большей информации.</p> + +<h2 id="Спецификации">Спецификации</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', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Нет значительных изменений.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td><code>margin</code> определён как анимируемый.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Устраняет его влияние на строковые (inline) элементы..</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</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")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="internal" href="/ru/docs/Web/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li> + <li><a class="internal" href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="en/CSS/margin collapsing">Схлопывание отступов</a></li> +</ul> |