Padding CSS
La propriété CSS padding est utilisée pour créer de l’espace autour du contenu d’un élément. CSS fournit différentes propriétés, à l’aide desquelles vous pouvez définir le padding de chaque côté d’un élément (droite, gauche, haut et bas).
Les côtés individuels
À l’aide des propriétés suivantes, vous pouvez définir le padding de chaque côté d’un élément :
Comme vous pouvez le deviner, pour le haut, nous utilisons padding-top, pour le bas padding-bottom, pour le côté gauche padding-left et pour le côté droit padding-right.
Toutes les propriétés de padding peuvent prendre les valeurs ci-dessous :
- length, utilisée pour spécifier un padding en px, pt, cm, etc.,
- %, qui spécifie un padding en % de la largeur de l’élément conteneur,
- inherit, qui spécifie que le padding doit être hérité de l’élément parent.
Notez que la propriété CSS padding ne peut pas accepter de valeurs négatives. Sa valeur par défaut pour toutes les propriétés de padding est 0.
Exemple des propriétés de padding individuelles :
Exemple d’utilisation des propriétés de padding individuelles :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
</div>
</body>
</html>Padding comme propriété raccourcie
La propriété CSS padding est une propriété raccourcie pour les propriétés de padding individuelles ci-dessous :
Dans les cas où la propriété padding n’a qu’une seule valeur, par exemple padding: 35px, les quatre paddings valent 35px.
Exemple de la propriété raccourcie padding avec une valeur :
Exemple d’utilisation de la propriété raccourcie padding avec une valeur :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: green;
padding: 35px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>La propriété padding peut avoir 2 valeurs, par exemple padding: 20px 40px, où les paddings du haut et du bas sont de 20px, et ceux de droite et de gauche de 40px.
Exemple de CSS padding avec 2 nombres
p {
padding: 20px 40px;
}C’est la même chose que le code ci-dessus.
Exemple de CSS padding avec 2 nombres, version longue, code
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Exemple de la propriété raccourcie padding avec deux valeurs :
Exemple de code CSS padding
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Résultat
La propriété padding peut avoir 3 valeurs, par exemple padding: 20px 15px 35px;, où le padding du haut est de 20px, ceux de droite et de gauche de 15px, et le padding du bas de 35px.
Exemple de CSS padding avec 3 nombres, code
p {
padding: 20px 15px 35px;
}C’est la même chose que le code ci-dessus.
Exemple de CSS padding avec 3 nombres, version longue, code
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Exemple de la propriété raccourcie padding avec trois valeurs :
Exemple de la propriété raccourcie padding avec trois valeurs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
padding: 20px 15px 35px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Et enfin, la propriété padding peut avoir quatre valeurs, par exemple padding: 25px 50px 75px 100px;, où le padding du haut est de 25px, celui de droite de 50px, celui du bas de 75px et celui de gauche de 100px.
Exemple de CSS avec le même padding
p {
padding: 25px 50px 75px 100px;
}Exemple de la propriété raccourcie padding avec quatre valeurs :
Exemple de la propriété raccourcie padding avec deux valeurs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #95e5f7;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Practice
What describes the 'padding' property in CSS correctly?