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
|
---
title: margin-bottom
slug: Web/CSS/margin-bottom
tags:
- CSS
- CSS свойство
translation_of: Web/CSS/margin-bottom
---
<div>{{CSSRef}}</div>
<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>margin-bottom</code></strong> устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
<p class="hidden">Исходник этого интерактивного примера хранится на репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, перейдите по ссылке https://github.com/mdn/interactive-examples и отправьте нам запрос на добавление.</p>
<p> <img alt="Влияние CSS свойства margin-bottom на блок элемента" src="https://mdn.mozillademos.org/files/16471/margin-bottomru.png" style="border-style: solid; border-width: 1px; font-size: 1rem; height: 150px; letter-spacing: -0.00278rem; width: 459px;"></p>
<p>Это свойство не имеет воздействия на незамещаемые элементы, такие как {{HTMLElement("span")}} или {{HTMLElement("code")}}.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css no-line-numbers">/* числовые значения */
margin-bottom: 10px; /* Абсолютная длина */
margin-bottom: 1em; /* относительно размера текста */
margin-bottom: 5%; /* относительно длины родительского блока */
/* Значения-ключевые слова */
margin-bottom: auto;
/* Глобальные значения */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
</pre>
<p>Свойство <code>margin-bottom</code> может быть выражено как ключевое слово <code>auto</code>, или как <code><число></code>, или как <code><процент></code>. Значение может быть положительным, нулевым или отрицательным.</p>
<h3 id="Values" name="Values">Значения</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>Размер отступа - фиксированная величина.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
<dt><code>auto</code></dt>
<dd>Браузер сам выбирает, какое значение использовать. Смотрите {{cssxref("margin")}}.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Example" name="Example">Пример</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="container">
<div class="box0">Блок 0</div>
<div class="box1">Блок 1</div>
<div class="box2">Отрицательное значение <code>margin</code> Блока 1 тянет меня вверх</div>
</div></pre>
<h3 id="CSS">CSS</h3>
<p>CSS устанавливает нижний отступ и высоту для элементов <code>div</code>.</p>
<pre class="brush: css">.box0 {
margin-bottom:1em;
height:3em;
}
.box1 {
margin-bottom:-1.5em;
height:4em;
}
.box2 {
border:1px dashed black;
border-width:1px 0;
margin-bottom:2em;
}
</pre>
<p>Несколько дополнений к свойствам элемента <code>div</code> и элемента класса container сделают более наглядным эффект использования свойства <code>margin</code>.</p>
<pre class="brush: css">.container {
background-color:orange;
width:320px;
border:1px solid black;
}
div {
width:320px;
background-color:gold;
}</pre>
<p>{{ EmbedLiveSample('Example',350,200) }}</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-bottom', 'margin-bottom')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Нет значительных изменений</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Определяет <code>margin-bottom</code> как анимируемое.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Убирает влияние свойства на строчные элементы.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</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-bottom")}}</p>
|
