padding - Propriété CSS
Résumé des caractéristiques de la propriété padding
auto
0
padding
passe progressivement d'une valeur à une autre.Description de la propriété padding
.
padding
définit l'espace compris entre la bordure d'un l'élément et son contenu.
Il s'agit donc des marges intérieures, à ne pas confondre avec les marges extérieures, qui sont
gérées par la propriété margin
.
padding
est une propriété raccourcie, qui permet de définir en une seule règle les quatre marges
intérieures d'un élément. Celles-ci peuvent être définies individuellement par les propriétés :
padding-top
: marge intérieure du haut.padding-right
: marge intérieure de droite.padding-bottom
: marge intérieure du bas.padding-left
: marge intérieure de gauche.
Remarque : padding
peut s'appliquer à un tableau ou aux cellules d'un tableau,
mais pas aux autres éléments intérieurs du tableau : en-têtes, lignes, colonnes, etc.
Les propriétés logiques (prise en charge du mode d'écriture).
Si on souhaite traiter du texte dans une langue non latine, qui s'écrit par exemple de droite à gauche comme les langues arabes, ou du haut vers le bas comme le japonais, il est préférable d'utiliser les propriétés suivantes.
padding-block
: marges au début et à la fin du bloc, compte-tenu du sens d'écriture.
Propriété raccourcie pour les deux suivantes.padding-block-start
: marge au début du bloc, compte-tenu du sens d'écriture.padding-block-end
: marge à la fin du bloc, compte-tenu du sens d'écriture.
padding-inline
: marges au début et à la fin des lignes, dans le sens d'écriture.
Propriété raccourcie pour les deux suivantes.padding-inline-start
: marge à la fin des lignes, dans le sens d'écriture.padding-inline-end
: marge en début de ligne, dans le sens d'écriture.
Reportez-vous à la propriété writing-mode
pour plus de précisions sur la gestion des langues non latines.
Remarque : la propriété raccourcie padding
, avec ses quatre valeurs qui correspondent à haut, droite, bas et gauche,
n'est pas dépendante de la direction d'écriture.
Voici les équivalences entre propriétés physiques et propriétés logiques en fonction de la langue du texte.
padding-top
padding-left
padding-right
padding-bottom
Syntaxes pour padding
.
- padding: auto;
Valeur par défaut. Les marges intérieures sont déterminées par le navigateur.
- padding: 15px 10px 10px 20px; a b c d
De une à quatre valeurs numériques positives ou nulles, avec leur unité de dimension (voir les unités CSS de dimension). Les valeurs sont séparées par un espace. Elles s'appliquent aux quatre marges intérieures, suivant leur nombre et la règle définie ci-dessous.
Si les valeurs sont exprimées en pourcentages, ces derniers sont calculés par rapport à la largeur de l'élément parent, même en ce qui concerne les marges intérieures haute et basse.
Cela peut surprendre : on pourrait penser que les pourcentages des marges verticales (haute et basse) soient calculées par rapport à la hauteur de l'élément parent. Mais cela conduirait à un calcul circulaire insoluble : les marges dépendant de la hauteur du parent, et cette dernière dépendant des marges.
Voici comment sont traitées les valeurs, en fonction de leur nombre :
- Si une seule valeur est précisée, elle s'applique aux quatre marges intérieures.
- Si deux valeurs sont précisées, la première définit les marges intérieures haute et basse, et la deuxième valeur définit les marges intérieures gauche et droite.
- Lorsque trois valeurs sont indiquées, elle définissent respectivement la marge intérieure du haut, les marges intérieures gauche et droite, la marge intérieure du bas.
- Enfin, si les quatre valeurs sont précisées, elles définissent les marges dans l'ordre suivant : marge intérieure du haut, marge intérieure de droite, marge intérieure du bas, marge intérieure de gauche.
padding:a;
Une seule valeur
padding:a b;
Deux valeurs
padding:a b c;
Trois valeurs
padding:a b c d;
Quatre valeurs La valeur initiale est :
.0
Animation de la propriété padding
.
Le petit exemple ci-dessous est composé d'un bloc principal (fond blanc, encadré) contenant un autre bloc (fond bleu, coins arrondis).
Pour ce deuxième élément il aurait été possible d'utiliser une image.
L'animation est obtenue en faisant varier les marges intérieures du bloc principal.
Un troisième bloc est le parent de cet ensemble. Quand on lui applique une couleur d'arrière-plan, il permet de matérialiser les marges intérieures pendant l'animation.
Simulateur pour la propriété raccourcie padding
.
Ce premier simulateur vous permet de faire varier les quatre valeurs de padding
.
Les marges intérieures sont matérialisées dans une couleur bleue (en fait c'est la couleur du fond de l'élément parent).
La hauteur de l'élément n'étant pas fixée, le changement des marges intérieures haute et basse
provoque un changement de la hauteur de l'élément.
Dans le sens horizontal, c'est la largeur du contenu qui s'adapte aux valeurs du padding
car la largeur de l'élément est limitée.
Simulateur pour les propriétés logiques, sensibles au sens d'écriture.
Ce simulateur utilise les propriétés de padding sensibles au sens d'écriture.
Mais pas aujourd'hui, aujourd'hui c'est poney
Prise en charge par les navigateurs (compatibilité).
padding
et les propriété détaillées correspondantes
padding-top
, padding-right
, padding-bottom
, padding-left
.
padding-block
, padding-inline
, padding-block-start
,
padding-block-end
, padding-inline-start
, padding-inline-end
.
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que padding
.
Les spécifications CSS éditées par le W3C sont organisées en modules. padding
fait partie du Module CSS - Modèle de blocs (CSS Box Model Module). Les définitions suivantes sont également décrites dans ce même module.