Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété padding

padding est une propriété du langage CSS. Elle définit les dimensions des marges intérieures, c'est à dire l'espace compris entre la bordure d'un élément et son contenu.

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.

Les marges intérieures en CSS

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.
    Propriété padding avec une valeur
    padding:a;
    Une seule valeur
    Propriété padding avec deux valeurs
    padding:a b;
    Deux valeurs
    Propriété padding avec trois valeurs
    padding:a b c;
    Trois valeurs
    Propriété padding avec quatre 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.

padding :
Un jour les CSS gouverneront le monde. Mais pas aujourd'hui, aujourd'hui c'est piscine

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.

writing-mode :
padding-block-start :
padding-block-end :
padding-inline-start :
padding-inline-end :
Un jour les CSS gouverneront le monde.
Mais pas aujourd'hui, aujourd'hui c'est poney
Un jour les CSS gouverneront le monde.
Mais pas aujourd'hui, aujourd'hui c'est poney

Voir aussi...

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