Propriété CSS padding-top
Comment utiliser la propriété CSS padding-top pour définir l'espace de rembourrage en haut d'un élément. Valeurs et exemples.
La propriété CSS padding-top définit la hauteur de la zone de rembourrage sur le côté supérieur d'un élément — l'espace entre le contenu de l'élément (ou sa bordure supérieure) et le contenu situé au-dessus de lui dans la boîte.
Le rembourrage est la couche la plus interne du modèle de boîte CSS : de l'intérieur vers l'extérieur, on trouve le contenu, puis le rembourrage, puis la bordure, puis la marge. Contrairement à la marge, le rembourrage se trouve à l'intérieur de l'élément ; il partage la couleur d'arrière-plan de l'élément et fait partie de la zone cliquable/visible.
Utilisez padding-top lorsque vous souhaitez pousser le contenu vers le bas depuis le bord supérieur de son conteneur — par exemple, pour donner de l'espace à un titre sous la bordure supérieure d'une carte, ou pour ajouter un rythme vertical à l'intérieur d'un bouton ou d'un encadré sans affecter l'espacement entre les éléments distincts (c'est le rôle de la marge).
Les valeurs négatives ne sont pas valides. Si vous devez remonter du contenu vers le haut, utilisez plutôt une margin-top négative.
Cette propriété n'affecte pas visiblement les éléments en ligne tels que <span> — le rembourrage vertical sur une boîte en ligne ne modifie pas la hauteur de ligne ni ne repousse les lignes environnantes. Définissez display: inline-block ou display: block sur l'élément si vous souhaitez que le rembourrage supérieur prenne effet.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments, sauf lorsque la propriété display est définie sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique également à ::first-letter. |
| Héritage | Non. |
| Animable | Oui. L'espace de rembourrage est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.paddingTop = "10px"; |
Syntaxe
Syntaxe de la propriété CSS padding-top
padding-top: length | initial | inherit;Exemple de la propriété padding-top :
Exemple de la propriété CSS padding-top avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 30px;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Résultat
Exemple de la propriété padding-top définie en "em".
Exemple de la propriété CSS padding-top avec une valeur en em
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 4em;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Une valeur em est relative à la taille de police propre à l'élément ; ainsi, padding-top: 4em s'adapte au texte. C'est pratique lorsque vous souhaitez que l'espacement grandisse et rétrécisse en même temps que la police.
Exemple de la propriété padding-top spécifiée en pourcentage :
La valeur en pourcentage est particulière : elle est calculée par rapport à la largeur du bloc conteneur, et non à sa hauteur. Ainsi, padding-top: 15% signifie 15 % de la largeur du parent. Cette particularité est à la base de la technique classique du rapport d'aspect pour maintenir une boîte proportionnelle lors du redimensionnement.
Exemple de la propriété CSS padding-top avec une valeur en "%" :
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #cccccc;
color: #8ebf42;
padding-top: 15%;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| length | Définit le rembourrage supérieur en px, pt, cm, etc. La valeur par défaut est 0. | Essayer » |
| % | Définit le rembourrage supérieur en % de la largeur de l'élément conteneur. | Essayer » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
padding-top vs. le raccourci padding
padding-top contrôle un seul côté. Lorsque vous définissez plusieurs côtés à la fois, le raccourci padding est plus court. Ces deux règles sont équivalentes :
/* longhand */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
/* shorthand: top right bottom left (clockwise) */
padding: 30px 10px 30px 10px;Avec deux valeurs, padding: 30px 10px définit les valeurs haut/bas à 30px et gauche/droite à 10px. Préférez la propriété individuelle padding-top lorsque vous ne souhaitez modifier que le côté supérieur sans toucher aux autres. Voir aussi padding-bottom pour le côté opposé.
Impact de padding-top sur la taille de l'élément
Par défaut (box-sizing: content-box), le rembourrage est ajouté en plus de la height déclarée. Un élément avec height: 100px et padding-top: 30px sera rendu avec une hauteur de 130px. Si vous définissez box-sizing: border-box, le rembourrage est dessiné à l'intérieur de la hauteur déclarée, de sorte que l'élément reste à 100px de haut et la zone de contenu rétrécit. C'est une source fréquente de bugs du type « pourquoi ma boîte est-elle trop haute ».