Rembourrage CSS


Table des matières

    Afficher la table des matières


Le remplissage est utilisé pour créer un espace autour du contenu d'un élément, à l'intérieur de toute bordure définie.


This element has a padding of 70px.

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>



Rembourrage CSS

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).


Rembourrage - Côtés individuels

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.

Exemple

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>




Padding - Propriété abrégée

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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>



Rembourrage et largeur des éléments

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.

Exemple

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.

Exemple

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>



Plus d'exemples

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>.



Toutes les propriétés de remplissage CSS

padding

Une propriété raccourcie pour définir toutes les propriétés de remplissage dans une seule déclaration

padding-bottom

Définit le remplissage inférieur d'un élément

padding-left

Définit le remplissage gauche d'un élément

padding-right

Définit le bon remplissage d'un élément

padding-top

Définit le remplissage supérieur d'un élément