Padding - Propriété CSS

Schéma syntaxique de padding.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique positive ou nulle, suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la largeur de l'élément.

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é résumée, 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.

Prise en charge de la langue.

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 dites "logiques" :

padding-block : marges au début et à la fin du bloc, compte-tenu du sens d'écriture.
Propriété résumée équivalente aux deux suivantes :

• padding-block-start : marge au début du bloc, compte-tenu du sens d'écriture. Pour les langues latines, est équivalente à padding-top.
• padding-block-end : marge à la fin du bloc, compte tenu du sens d'écriture. Est équivalentes à padding-bottom pour les langues latines.

padding-inline : marges au début et à la fin des lignes, dans le sens d'écriture.
Propriété résumée équivalentes à :

• padding-inline-start : marge à la fin des lignes, dans le sens d'écriture. Pour les langues latines, est équivalente à padding-left.
• padding-inline-end : marge en début de ligne, dans le sens d'écriture. Est équivalente à padding-right pour les langues latines.

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.

Valeurs pour padding.

• 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 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.
  
  padding:a;
  Une seule valeur

  
  padding:a b;
  Deux valeurs

  
  padding:a b c;
  Trois valeurs

  
  padding:a b c d;
  Quatre valeurs
• padding: initial; (0) padding: inherit; padding: revert; padding: revertLayer; padding: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

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.

Manipulation de la propriété padding par programme.

Avec Javascript, modifier la valeur de padding.

En Javascript, voici comment modifier la valeur de padding. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case.

let el = document.getElementById('id'); el.style['padding'] = '2%'; // ou let el = document.getElementById('id'); el.style.padding = '2%';

Avec Javascript, lire la valeur de padding.

Cet exemple de code fonctionne si la propriété a été affectée directement à l'élément lui-même via son attribut style, sans passer par un sélecteur CSS. La valeur est renvoyée telle qu'elle a été définie, avec la même unité.

let el = document.getElementById('id'); let value = el.style['padding']; // ou let el = document.getElementById('id'); let value = el.style.padding;

Avec Javascript, lire la valeur calculée de padding.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives et de la prise en compte éventuelle des valeurs héritées. Si aucune valeur n'a été affectée à padding ni à l'élément, ni à aucun de ses parents, ce sera la valeur initiale.

Dans le cas de padding, la valeur est retournée en pixels ou en pourcentages.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('padding');

Avec JQuery, modifier la valeur de padding.


$('#id').css('padding', '2%');


Avec JQuery, lire la valeur calculée de padding.

Comme en Javascript, la valeur est retournée en pixels ou en pourcentages.

let value = $('#id').css('padding');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété padding et affichent ensuite soit les valeurs telles qu'elles ont été appliquées, soit les valeurs calculées. Cette deuxième option permet de voir comment est sérialisée la valeur de padding : on constate que les pourcentages sont bien mémorisés en tant que pourcentages, mais que toutes les autres unités sont converties en pixels.

Simulateur avec la propriété 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.

Prise en charge de padding par les navigateurs.

La propriété padding, dans sa version physique, existe depuis la tote première version de CSS. Elle ne pose par de problème de compatibilité. Plus récentes, les propriétés logiques sont cependant bien reconnues également.

1

Propriétés
physiques

2

Propriétés
logiques

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la propriété padding.

Les propriétés physiques pour la définition de marges intérieures (padding) existent depuis la toute première spécification du langage CSS. Les propriétés logiques équivalentes, prenant en charge le mode d'écriture en fonction de la langue, ont ensuite été ajoutées.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale des propriétés padding... et de la propriété résumée padding.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ajout de la valeur inherit pour la définition des marges intérieures (padding).
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Modèle de blocs - Niveau 3

  Pas de modification concernant les propriétés padding....
  

  26 Juillet 2001

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  16 Février 2023

  Proposé à la recommandation.

  

  06 Avril 2023

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Définition des propriétés logiques (prenant en compte le mode d'écriture en fonction de la langue).
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Modèle de blocs - Niveau 4

  Pas de modification concernant les propriétés padding....
  

  21 Avril 2020

  Document de travail.

  

  

  

Voir aussi, au sujet des marges.

Les marges (intérieures et extérieures) sont décrites dans ce module de la spécification CSS : CSS Box Model Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :