padding-top

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-top d'un élément ajuste la hauteur de la boîte de remplissage (padding) en haut de l'élément.

La zone de remplissage correspond à l'espace entre le contenu et la bordure. Contrairement à margin-top, padding-top ne peut pas recevoir de valeurs négatives.

Exemple interactif

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

Syntaxe

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

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

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

Valeurs

<length>

Cette valeur définit une hauteur 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-top = 
<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-top: 5em;
  border: solid 1px;
}

Résultat

Spécifications

Specification
CSS Box Model Module Level 3
# padding-physical

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding-top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi