CSS - Propriété padding

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.

Note : si on souhaite traiter du texte dans une langue non européenne, 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 quatre propriétés suivantes, mais cela ne change rien en ce qui concerne la propriété raccourcie padding :

• padding-block-start : marge au début du bloc, compte-tenu du sens d'écriture.
• padding-inline-end : marge en début de ligne, dans le sens d'écriture.
• padding-block-end : marge à la fin du bloc, compte-tenu du sens d'écriture.
• padding-inline-start : marge à la fin des lignes, dans le sens d'écriture.

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.

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 unités de dimensions en CSS). 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 :

  1. Si une seule valeur est précisée, elle s'applique aux quatre marges intérieures.
  2. 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.
  3. 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.
  4. 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
• padding: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

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 différente.

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 fixée.

Simulateur pour les propriétés sensibles au sens d'écriture.

Ce simulateur utilise les propriétés de padding sensibles au sens d'écriture. Elles sont appliquées aux deux blocs ci-dessous. Le premier est en écriture européenne, de gauche à droite. Le deuxième bloc est en écriture de droite à gauche.

Voir aussi...

Dimensions et marges des blocs - Propriétés.

• box-sizing : Mode de calcul des dimensions de blocs.
• height : Hauteur de l'élément.
• margin : Résumé des quatre marges.
• margin-bottom : Marge du bas.
• margin-left : Marge de gauche.
• margin-right : Marge de droite.
• margin-top : Marge du haut.
• max-height : Hauteur maxi.
• max-width : Largeur maxi.
• min-height : Hauteur mini.
• min-width : Largeur mini.
• width : Largeur de l'élément.