padding
Définit l’espace intérieur entre le contenu et la bordure.
- Valeur initiale
0- Héritée
- Non
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments sauf les éléments internes des tableaux (hormis les cellules)
- JavaScript
element.style.padding = "12px 20px"
Exemple
#.alert {
padding: 12px 16px;
border-radius: 10px;
background: #1e1533;
}<p class="alert">Votre série dure déjà depuis 7 jours. Continuez comme ça !</p>Définition et utilisation
#La propriété padding est un raccourci pour quatre marges intérieures : haut, droite, bas et gauche. La marge intérieure se trouve à l’intérieur de la bordure et prend la couleur de fond de l’élément, c’est pourquoi elle donne de l’air à un bouton ou à une carte.
L’ordre des valeurs est le même que pour margin : une pour les quatre côtés, deux pour le vertical et l’horizontal, quatre dans le sens des aiguilles d’une montre à partir du haut. Contrairement à la marge extérieure, la marge intérieure ne peut pas être négative.
Un padding en pourcentage se calcule toujours par rapport à la largeur du parent, même verticalement. On exploitait autrefois cela pour conserver les proportions d’un élément ; aujourd’hui aspect-ratio fait cela plus simplement.
Syntaxe
#padding: <haut> <droite>? <bas>? <gauche>?;Valeurs
#- Le texte touche le bord du fond.
<longueur>
Un espace intérieur égal sur chaque côté.vertical horizontal
Un bouton classique : moins en vertical, plus en horizontal.quatre valeurs
Haut, droite, bas, gauche, dans le sens des aiguilles d’une montre.
Valeurs en pratique
#0
.demo { padding: 0; }12px
.demo { padding: 12px; }8px 24px
.demo { padding: 8px 24px; }4px 8px 20px 32px
.demo { padding: 4px 8px 20px 32px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Avec
box-sizing: content-box, le padding agrandit l’élément au-delà dewidth. Avecborder-box, il reste dans la largeur indiquée. - Les éléments cliquables ont besoin d’un padding suffisant. Une zone tactile sur téléphone devrait mesurer au moins environ 44px.
Entrées associées
#- margin vs paddingmargin est un espace transparent à l’extérieur de l’élément. padding est l’espace à l’intérieur de la bordure, entre le contenu et le bord, et prend le fond de l’élément.
- marginDéfinit l’espace extérieur d’un élément par rapport à ses voisins.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- box-sizingDécide si width et height incluent la marge intérieure et la bordure.
- widthDéfinit la largeur d’un élément.
- padding-inlineDéfinit l’espace intérieur au début et à la fin d’une ligne. La version logique de padding-left et padding-right, qui comprend le sens d’écriture.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.