Propriétés CSS Rembourrage
Les CSS padding propriétés sont utilisées pour générer l' espace autour du contenu.
Les propriétés de remplissage définir la taille de l'espace blanc entre le contenu de l'élément et la frontière de l'élément.
Cet élément a un rembourrage de 50px.
CSS Rembourrage
Les propriétés CSS padding définissent l'espace blanc entre le contenu de l'élément et la frontière de l'élément.
Le rembourrage efface une zone autour du contenu (à l'intérieur de la frontière) d'un élément.
 | Remarque: Le rembourrage est affectée par la couleur de l'élément de fond! |
|---|
Avec CSS, vous avez le plein contrôle sur le rembourrage. Il y a des propriétés CSS pour la fixation du rembourrage pour chaque côté d'un élément (en haut, à droite, en bas et à gauche).
Rembourrage - Sides individuels
CSS a des propriétés pour spécifier le rembourrage de chaque 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 rembourrage en px, pt, cm , etc.
- % - Indique un rembourrage en% de la largeur de l'élément contenant
- hériteront - spécifie que le rembourrage doit être héritée de l'élément parent
L'exemple suivant définit le remplissage différent pour les quatre côtés d'un <p> élément:
Exemple
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
} Essayez - le vous - même » Rembourrage - Propriété Shorthand
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de remplissage dans une propriété.
Le padding propriété est un raccourci pour les propriétés de remplissage individuelles suivantes:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Alors, voici comment cela fonctionne:
Si le padding propriété dispose de quatre valeurs:
- padding: 25px 50px 75px 100px;
- top rembourrage est 25px
- padding droit est 50px
- padding-bottom est 75px
- padding gauche est 100px
Si le padding propriété dispose de trois valeurs:
- padding: 25px 50px 75px;
- top rembourrage est 25px
- rembourrages droite et gauche sont 50px
- padding-bottom est 75px
Si le padding propriété dispose de deux valeurs:
- padding: 25px 50px;
- rembourrages supérieure et inférieure sont 25px
- rembourrages droite et gauche sont 50px
Si le padding propriété a une valeur:
- padding: 25px;
- les quatre rembourrages sont 25px
Autres exemples
Toutes les propriétés de remplissage dans une déclaration
Cet exemple montre un raccourci pour définir toutes les propriétés de remplissage dans une déclaration, peut avoir un à quatre valeurs.
Réglez le rembourrage gauche
Cet exemple montre comment définir le rembourrage gauche d'un <p> élément.
Réglez le droit padding
Cet exemple montre comment définir le droit d'un rembourrage <p> élément.
Réglez le rembourrage supérieur
Cet exemple montre comment définir le rembourrage haut d'un <p> élément.
Réglez le rembourrage de fond
Cet exemple montre comment définir le rembourrage fond d'un <p> élément.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »
Toutes les propriétés CSS Rembourrage
| Propriété | La description |
|---|---|
| padding | Un raccourci pour définir toutes les propriétés de remplissage dans une déclaration |
| padding-bottom | Définit le rembourrage de fond d'un élément |
| padding-left | Définit le rembourrage gauche d'un élément |
| padding-right | Définit le droit de rembourrage d'un élément |
| padding-top | Définit le rembourrage supérieur d'un élément |