padding-top
Baseline
Large disponibilité
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é CSS padding-top définit la hauteur de la zone de remplissage en haut d'un élément.
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">
Loin dans les régions inexplorées de l'extrémité démodée du bras spiral
occidental de la Galaxie se trouve un petit soleil jaune négligé.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
La zone de remplissage d'un élément est l'espace entre son contenu et sa bordure.
Note :
La propriété padding peut être utilisée pour définir les marges intérieures sur les quatre côtés d'un élément avec une seule déclaration.
Syntaxe
/* Valeurs de type <length> */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;
/* Valeurs de type <percentage> */
padding-top: 10%;
/* Valeurs globales */
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: revert-layer;
padding-top: unset;
La propriété padding-top est définie comme une seule valeur choisie parmi la liste ci-dessous. Contrairement aux marges, les valeurs négatives ne sont pas autorisées pour le padding.
Valeurs
<length>-
La taille du remplissage en tant que valeur fixe. Doit être non négative.
<percentage>-
La taille du remplissage en pourcentage, relative à la taille en ligne (largeur dans une langue horizontale, définie par
writing-mode) du bloc englobant. Doit être non négative.
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 défini ou une longueur absolue |
| Type d'animation | une longueur |
Syntaxe formelle
padding-top =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir le remplissage supérieur en utilisant des pixels et des pourcentages
.content {
padding-top: 5%;
}
.side-box {
padding-top: 10px;
}
Spécifications
| Spécification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
padding-right,padding-bottometpadding-left - La propriété raccourcie
padding - Les propriétés
padding-block-start,padding-block-end,padding-inline-startetpadding-inline-end - Les propriétés raccourcies
padding-blocketpadding-inline - Le guide d'introduction au modèle de boîte CSS
- Le module du modèle de boîte CSS