Propriété CSS padding-top
La propriété padding-top définit l'espace de marge intérieure sur le haut d'un élément.
INFO
Les valeurs négatives ne sont pas valides.
INFO
Cette propriété n'affecte pas les éléments en ligne, comme <span>.
| 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. Elle s'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. La marge intérieure est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.paddingTop = "10px"; |
Syntaxe
Syntaxe de la propriété CSS padding-top
css
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
html
<!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
html
<!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>Exemple de la propriété padding-top spécifiée en pourcentage :
Exemple de la propriété CSS padding-top avec une valeur en "%" :
html
<!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 | Tester |
|---|---|---|
| length | Définit la marge intérieure supérieure en px, pt, cm, etc. La valeur par défaut est 0. | Tester » |
| % | Définit la marge intérieure supérieure en % de la largeur de l'élément parent. | Tester » |
| initial | Applique la valeur par défaut à la propriété. | Tester » |
| inherit | Hérite la propriété de l'élément parent. |
Pratique
Quelle est la fonction de la propriété CSS 'padding-top' ?