padding
=======

La propriété **`padding`** est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.

Exemple interactif
------------------

La zone de remplissage correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.

**Note :** Le *padding* permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge (`margin`) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.

Syntaxe
-------


```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;
```


Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (`<length>`) ou un pourcentage (`<percentage>`). Les valeurs négatives ne sont pas autorisées.

* **Une valeur** applique le même écart aux 4 côtés.
* **Deux valeurs** appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.
* **Trois valeurs** appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.
* **Quatre valeurs** appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.
### Valeurs

Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :

`<length>`

Définit un écart fixe. Voir la page `<length>` sur les valeurs de ce type.

`<percentage>`

Définit un écart relatif à la **largeur** du bloc englobant. Voir la page `<percentage>` pour plus d'informations sur les valeurs de ce type.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `padding-bottom`: `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top`: `0`
 |
| Applicabilité | tous les éléments exceptés `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` et `table-column`. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `padding-bottom`: le pourcentage tel que spécifié ou une longueur absolue
* `padding-left`: le pourcentage tel que spécifié ou une longueur absolue
* `padding-right`: le pourcentage tel que spécifié ou une longueur absolue
* `padding-top`: le pourcentage tel que spécifié ou une longueur absolue
 |
| Type d'animation | une longueur |

Syntaxe formelle
----------------
```

padding =   
  <'padding-top'>{1,4}    
  
```

Exemples
--------

### HTML


```html
<h4>Coucou le monde !</h4>
<h3>Le remplissage n'est pas le même ici.</h3>
```

### CSS


```css
h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3 {
  background-color: blue;
  padding: 400px 5%;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* CSS : Le modèle de boîtes
* Les quatres propriétés détaillées synthétisées par `padding` :
    + `padding-top`
    + `padding-right`
    + `padding-bottom`
    + `padding-left`.