Remplissage CSS
La propriété padding crée un espace autour du contenu de l'élément.
Les valeurs de cette propriété sont définies en utilisant des longueurs ou des pourcentages. Elle ne peut pas accepter des valeurs négatives. La valeur par défaut pour toutes les propriétés de remplissage est 0.
Voici les propriétés de remplissage CSS:
On peut utiliser la propriété padding pour tous les côtés (haut, bas, gauche, droit). Pour le côté haut on utilise padding-top, pour le bas on utilise padding-bottom, pour le gauche padding-left et pour le droit padding-right.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px 20px 40px;
}
</style>
</head>
<body>
<p>Paragraphe avec les propriétés background-color, color et padding.</p>
</body>
</html>Maintenant expliquons ce code: nous utilisons la propriété background-color pour l'arrière-plan de notre paragraphe, puis la propriété color pour la couleur de notre texte, et enfin la propriété padding pour l'espace autour du contenu de l'élément. Dans cet exemple le contenu de l'élément est le texte écrit dans l'élément p.
Maintenant passons à "padding: 20px 40px 20px 40px". Ce code signifie que le remplissage en haut doit être 20px, au côté droit 40px, en bas 20px et au côté gauche 40px.
On utilise cette propriété lorsqu'on donne dess valeurs à tous les côtés. Cela doit ressembler à cela dans le code.
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Si tous les côtés ont les mêmes valeurs (par exemple tous les côtés sont 50px) en css on peut écrire cela comme ça.
p {
padding: 50px;
}Lorsqu'on a les mêmes valeurs pour les côtés haut et bas (par exemple 20px) et les mêmes pour les côtés gauche et droit (par exemple 10px), on peut écrire le code suivant.
p {
padding: 20px 10px;
}C'est le même code que celui au-dessus.
p {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}Lorsque les valeurs pour le gauche et le droit sont les mêmes, par exemple 15px, le côté haut est 20px et le côté bas est 35px, nous allons écrire le code suivant.
p {
padding: 20px 15px 35px;
}C'est le même code que celui au-dessus.
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
