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 :

padding - Propriété CSS

padding
padding-block-start
padding-block-end
padding-inline-start
padding-inline-end

Résumé des caractéristiques de la propriété padding

Description rapide
Marges intérieures des quatre cotés.
Statut
Standard
Type de valeur
Dimension+ {1-4}
Valeurs prédéfinies
auto
Pourcentages
Calculés par rapport à la largeur logique du bloc parent.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété padding passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Modèle de blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CR (document proposé pour la recommandation)

Statut du document:: Ancienne norme, obsolète

Statut du document:: Ancienne norme, obsolète

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.

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
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
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 :

    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: initial; padding: inherit; padding: revert; padding: revert-layer; padding: unset;

    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.

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

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.


Mode d'écriture :

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

Prise en charge par les navigateurs (compatibilité).

Colonne 1
La première colonne du tableau concerne les propriétés physiques, c'est à dire la propriété résumée padding et les propriété détaillées correspondantes padding-top, padding-right, padding-bottom, padding-left.
Colonne 2
La colonne suivante concerne les propriétés logiques équivalentes padding-block, padding-inline, padding-block-start, padding-block-end, padding-inline-start, padding-inline-end.
1
Physical properties
2
Logical properties
Estimation de la prise en charge en pourcentage du parc actuel.
95%
90%

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.

Propriétés.

Résumé des quatre marges.
Définit la marge après le bloc, compte-tenu du sens d'écriture.
Définit la marge avant le bloc, compte-tenu du sens d'écriture.
Marge du bas.
Définit la marge après la fin de ligne, compte-tenu du sens d'écriture.
Définit la marge avant le début des lignes de texte, compte-tenu du sens d'écriture.
Marge de gauche.
Marge de droite.
Marge du haut.
Définit la gestion des marges successives au sein d'un même container.
Définit la maarge intérieure à la fin du bloc, compte-tenu du sens d'écriture.
Définit la marge intérieure au début du bloc, compte-tenu du sens d'écriture.
Marge intérieure en bas.
Définit la marge intérieure du côté de la fin des lignes de texte, compte-tenu du sens d'écriture.
Définit la marge intérieure du côté du début des lignes de texte, compte-tenu du sens d'écriture.
Marge intérieure à gauche.
Marge intérieure à droite.
Marge intérieure en haut.