padding-top
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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
padding-top: 1em;
padding-top: 10%;
padding-top: 20px;
padding-top: 1ch;
padding-top: 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;
}
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
/* 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 initiale | 0 |
|---|---|
| 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ée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | une longueur |
Syntaxe formelle
padding-top =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
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
.padd {
padding-top: 5em;
border: solid 1px;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Compatibilité des navigateurs
Voir aussi
- Le modèle de boîtes CSS
- La propriété raccourcie
paddingqui permet de paramétrerpadding-top,padding-right,padding-bottometpadding-left.