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
|
---
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>
{{csssyntax}}
<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">Рабочий пример</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>{{ EmbedLiveSample('Live_Sample', 'Live Sample Link', 300) }}</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{Compat}}</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>
|
