Le remplissage est utilisé pour créer un espace autour du contenu d'un élément, à l'intérieur de toute bordure définie.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>
</body>
</html>
Les propriétés CSS padding
sont utilisées pour générer de l'espace autour le contenu d'un élément, à l'intérieur de toutes les bordures définies.
Avec CSS, vous avez un contrôle total sur le remplissage. Il y a des propriétés pour définir le remplissage de chaque côté d'un élément (haut, droite, bas et gauche).
CSS a des propriétés pour spécifier le remplissage de chacun côté d'un élément :
padding-top
padding-right
padding-bottom
padding-left
Toutes les propriétés de remplissage peuvent avoir les valeurs suivantes :
longueur - spécifie un remplissage en px, pt, cm, etc.
% - spécifie un remplissage en % de la largeur de l'élément conteneur
hériter - spécifie que le remplissage doit être hérité de l'élément parent
Remarque : Les valeurs négatives ne sont pas autorisées.
Définissez un remplissage différent pour les quatre côtés d'un élément <div> :
div { padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de remplissage dans une propriété.
La propriété padding
est une propriété abrégée pour l'individu suivant propriétés de remplissage :
padding-top
padding-right
padding-bottom
padding-left
Voici donc comment cela fonctionne :
Si la propriété padding
a quatre valeurs :
padding: 25px 50px 75px 100px;
le remplissage supérieur est de 25 px
le remplissage droit est de 50 px
le rembourrage inférieur est de 75 px
le remplissage gauche est de 100 px
Utilisez la propriété raccourcie padding avec quatre valeurs :
div { padding: 25px 50px 75px 100px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
Si la propriété padding
a trois valeurs :
padding: 25px 50px 75px;
le remplissage supérieur est de 25 px
les rembourrages droit et gauche font 50 px
le rembourrage inférieur est de 75 px
Utilisez la propriété raccourcie padding avec trois valeurs :
div { padding: 25px 50px 75px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 3 values</h2>
<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>
</body>
</html>
Si la propriété padding
a deux valeurs :
padding: 25px 50px;
les rembourrages supérieur et inférieur sont de 25 px
les rembourrages droit et gauche font 50 px
Utilisez la propriété raccourcie padding avec deux valeurs :
div { padding: 25px 50px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>
</body>
</html>
Si la propriété padding
a une valeur :
padding: 25px;
les quatre rembourrages font 25px
Utilisez la propriété raccourcie padding avec une valeur :
div { padding: 25px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
La propriété CSS width
spécifie la largeur de la zone de contenu de l'élément. Le la zone de contenu est la partie à l'intérieur du remplissage, de la bordure et de la marge d'un élément (le modèle en boîte).
Ainsi, si un élément a une largeur spécifiée, le remplissage ajouté à cet élément sera être ajouté à la largeur totale de l’élément. C'est souvent un résultat indésirable.
Ici, l'élément <div> a une largeur de 300 px. Cependant, la largeur réelle de l'élément <div> sera de 350 px (300 px + 25px de remplissage gauche + 25px de remplissage droit) :
div {
width: 300px;
padding: 25px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>
Pour conserver la largeur à 300 px, quelle que soit la quantité de remplissage, vous pouvez utiliser le propriété box-sizing
. Cela amène l'élément à conserver sa largeur réelle ; si vous augmentez le remplissage, l'espace de contenu disponible diminuera.
Utilisez la propriété box-sizing pour conserver la largeur à 300 px, quelle que soit la quantité de rembourrage :
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>
Définir le remplissage gauche
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 50%;
}
</style>
</head>
<body>
<h1>The padding-left Property</h1>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>
Cet exemple montre comment définir le remplissage gauche d'un élément <p>.
Définir le bon rembourrage
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-right: 2cm;
}
p.padding2 {
padding-right: 50%;
}
</style>
</head>
<body>
<h1>The padding-right Property</h1>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
Cet exemple montre comment définir le bon remplissage d'un élément <p>.
Définir le rembourrage supérieur
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}
p.padding2 {
padding-top: 50%;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>
</body>
</html>
Cet exemple montre comment définir le remplissage supérieur d'un élément <p>.
Définir le rembourrage inférieur
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom:2cm;
}
p.padding2 {
padding-bottom:50%;
}
</style>
</head>
<body>
<h1>The padding-bottom Property</h1>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>
</body>
</html>
Cet exemple montre comment définir le remplissage inférieur d'un élément <p>.
Une propriété raccourcie pour définir toutes les propriétés de remplissage dans une seule déclaration
Définit le remplissage inférieur d'un élément
Définit le remplissage gauche d'un élément
Définit le bon remplissage d'un élément
Définit le remplissage supérieur d'un élément