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
|
---
title: padding
slug: Web/CSS/padding
tags:
- CSS
- CSS Padding
- CSS свойство
translation_of: Web/CSS/padding
---
<div>{{CSSRef}}</div>
<h2 id="Обзор">Обзор</h2>
<p class="summary">Свойство <strong><code>padding</code></strong> устанавливает внутренние отступы/поля со всех сторон элемента. <a href="/en/CSS/box_model#padding">Область отступов</a> это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.</p>
<p class="summary">Свойство <code>padding</code> краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css">/* Применяется для всех 4 сторон */
padding: 1em;
/* По вертикали | По горизонтали */
padding: 5% 10%;
/* Сверху | По горизонтали | Снизу */
padding: 1em 2em 2em;
/* Сверху | Справа | Снизу | Слева */
padding: 2px 1em 0 1em;
/* Глобальные значения */
padding: inherit;
padding: initial;
padding: unset;
</pre>
<h3 id="Значения">Значения</h3>
<p>Укажите одно, два, три или четыре следующих значения:</p>
<dl>
<dt><code><length></code></dt>
<dd>Устанавливает неотрицательный, фиксированный размер. Подробнее в разделе {{cssxref("<length>")}}.</dd>
<dt><code><percentage></code></dt>
<dd>Относительно ширины родительского блока.</dd>
</dl>
<ul>
<li><strong>Одно</strong> значение применяется ко всем четырем сторонам</li>
<li><strong>Два</strong> значения применяются: <strong>1.</strong> <em>верхняя и нижняя</em> и <strong>2.</strong> <em>левая и правая</em> стороны</li>
<li><strong>Три</strong> значения применяются: <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>левая и правая</em> и <strong>3.</strong> <em>нижняя</em> стороны</li>
<li><strong>Четыре</strong> значения применяются<strong>:</strong> <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>правая</em>, <strong>3.</strong> <em>нижняя</em> и <strong>4.</strong> <em>левая</em> стороны</li>
</ul>
<h3 id="Формальное_описание_синтаксиса">Формальное описание синтаксиса</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Примеры">Примеры</h2>
<pre class="brush: css"> padding: 5%; /* со всех сторон отступ 5% */
</pre>
<pre class="brush: css"> padding: 10px; /* со всех сторон отступ 10px */
</pre>
<pre class="brush: css"> padding: 10px 20px; /* сверху и снизу отступ 10px */
/* слева и справа отступ 20px */
</pre>
<pre class="brush: css"> padding: 10px 3% 20px; /* сверху отступ 10px */
/* слева и справа отступ 3% */
/* снизу отступ 20px */
</pre>
<pre class="brush: css"> padding: 1em 3px 30px 5px; /* сверху отступ 1em */
/* справа отступ 3px */
/* снизу отступ 30px */
/* слева отступ 5px */
</pre>
<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>
<h2 id="Live_Sample" name="Live_Sample">Рабочий пример</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><h4>Hello world!</h4>
<h3>The padding is different in this line.</h3>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">h4{
background-color: green;
padding: 50px 20px 20px 50px;
}
h3{
background-color: blue;
padding: 400px 50px 50px 400px;
}
</pre>
<p>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</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', '#the-padding', 'padding') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>No change</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>No change</td>
</tr>
<tr>
<td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.padding")}}</p>
<div id="compat-desktop"></div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
</ul>
|
