padding-right

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété padding-right d'un élément correspond à l'espace nécessaire à la droite d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. padding-right ne peut pas recevoir de valeurs négatives.

Exemple interactif

padding-right: 1.5em;

padding-right: 10%;

padding-right: 20px;

padding-right: 1ch;

padding-right: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

Note : La propriété raccourcie padding permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-right donc).

Syntaxe

css
/* Valeurs de longueur */
/* Type <length>       */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/* Valeurs de proportions */
/* Type <percentage>      */
padding-right: 10%;

/* Valeurs globales */
padding-right: inherit;
padding-right: initial;
padding-right: unset;

Valeurs

<length>

Cette valeur définit une largeur positive. Voir <length> pour plus de détails.

<percentage>

Un pourcentage en rapport avec la largeur du bloc englobant. Voir <percentage> pour plus de détails.

Définition formelle

Valeur initiale0
Applicabilitétous les éléments exceptés table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Valeur calculéele pourcentage tel que spécifié ou une longueur absolue
Type d'animationune longueur

Syntaxe formelle

padding-right = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

HTML

html
<p class="padd">
  Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond
  et qu’elle fut forcée de se baisser pour ne pas se casser le cou.
</p>

CSS

css
.padd {
  padding-right: 20%;
  border: solid 1px;
}

Résultat

Spécifications

Specification
CSS Box Model Module Level 3
# padding-physical

Compatibilité des navigateurs

Voir aussi