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
|
---
title: padding
slug: Web/CSS/padding
tags:
- CSS
- Propriété
- Propriété raccourcie
- Reference
translation_of: Web/CSS/padding
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p>
<div class="note">
<p><strong>Note :</strong> Le <em>padding</em> permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css">/* On applique la même valeur aux quatre côtés */
padding: 1em;
/* vertical | horizontal */
padding: 5% 10%;
/* haut | horizontal | bas */
padding: 1em 2em 2em;
/* haut | droit | bas | gauche */
padding: 5px 1em 0 2em;
/* Valeurs globales */
padding: inherit;
padding: initial;
padding: unset;
</pre>
<p>Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (<code><a href="#length"><length></a></code>) ou un pourcentage (<code><a href="#percentage"><percentage></a></code>). Les valeurs négatives ne sont pas autorisées.</p>
<ul>
<li><strong>Une valeur</strong> applique le même écart aux 4 côtés.</li>
<li><strong>Deux valeurs</strong> appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.</li>
<li><strong>Trois valeurs</strong> appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.</li>
<li><strong>Quatre valeurs</strong> appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.</li>
</ul>
<h3 id="Valeurs">Valeurs</h3>
<p>Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :</p>
<dl>
<dt><code><length></code></dt>
<dd>Définit un écart fixe. Voir la page {{cssxref("<length>")}} sur les valeurs de ce type.</dd>
<dt><code><percentage></code></dt>
<dd>Définit un écart relatif à la <strong>largeur</strong> du bloc englobant. Voir la page {{cssxref("<percentage>")}} pour plus d'informations sur les valeurs de ce type.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><h4>Coucou le monde !</h4>
<h3>Le remplissage n'est pas le même ici.</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 5%;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples',"100%","100%")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#the-padding', 'padding')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Aucun changement.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>padding</code> peut être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Aucun changement.</td>
</tr>
<tr>
<td>{{Specname('CSS1', '#padding', 'padding')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.padding")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a class="internal" href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box model">CSS : Le modèle de boîtes</a></li>
<li>Les quatres propriétés détaillées synthétisées par <code>padding</code> :
<ul>
<li>{{cssxref("padding-top")}}</li>
<li>{{cssxref("padding-right")}}</li>
<li>{{cssxref("padding-bottom")}}</li>
<li>{{cssxref("padding-left")}}.</li>
</ul>
</li>
</ul>
|
