Recherche…


Syntaxe

  • padding: length | initial | inherit | unset;
  • padding-top: longueur | initial | inherit | unset;
  • padding-right: length | initial | inherit | unset;
  • padding-bottom: length | initial | inherit | unset;
  • padding-left: length | initial | inherit | unset;

Remarques

La propriété padding définit l'espace de remplissage de tous les côtés d'un élément. La zone de remplissage est l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées .

1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN

Voir aussi cette question , "Pourquoi CSS ne supporte-t-il pas le remplissage négatif?" et ses réponses.

Veuillez également considérer le modèle de boîte lors de l'utilisation du remplissage. Selon la valeur de la taille de la boîte, le remplissage d'un élément peut soit ajouter la hauteur / largeur précédemment définie d'un élément ou non.

Propriétés connexes:

marge

Le remplissage sur des éléments en ligne ne s'appliquera qu'à gauche et à droite de l'élément, et non au haut et au bas, en raison des propriétés d'affichage inhérentes aux éléments en ligne.

Rembourrage d'un côté donné

La propriété padding définit l'espace de remplissage de tous les côtés d'un élément. La zone de remplissage est l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.

Vous pouvez spécifier un côté individuellement:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Le code suivant ajouterait un remplissage de 5px en haut de la div:

<style>
.myClass {
    padding-top: 5px;
}
</style>

<div class="myClass"></div>

Rembourrage

La propriété padding définit l'espace de remplissage de tous les côtés d'un élément. La zone de remplissage est l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.

Pour éviter d'ajouter du rembourrage à chaque côté individuellement (en utilisant un padding-top , un padding-left etc.), pouvez-vous l'écrire comme ci-dessous:

Quatre valeurs :

<style>
    .myDiv {
        padding: 25px 50px 75px 100px; /* top right bottom left; */
    }
</style>
<div class="myDiv"></div>

entrer la description de l'image ici

Trois valeurs :

<style>
    .myDiv {
        padding: 25px 50px 75px; /* top left/right bottom */
    }
</style>
<div class="myDiv"></div>

entrer la description de l'image ici

Deux valeurs :

<style>
    .myDiv {
        padding: 25px 50px; /* top/bottom left/right */
    }
</style>
<div class="myDiv"></div>

entrer la description de l'image ici

Une valeur :

<style>
    .myDiv {
        padding: 25px; /* top/right/bottom/left */
    }
</style>
<div class="myDiv"></div>

entrer la description de l'image ici



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow