CSS => Rembourrage

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

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>

Trois valeurs :

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

Deux valeurs :

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

Une valeur :

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

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS
Rembourrage

Recherche…

Syntaxe

Remarques

Rembourrage d'un côté donné

Rembourrage