CSS - Rembourrages
La propriété padding vous permet de spécifier combien d'espace doit apparaître entre le contenu d'un élément et sa bordure -
La valeur de cet attribut doit être une longueur, un pourcentage ou le mot hériter . Si la valeur est héritée , elle aura le même remplissage que son élément parent. Si un pourcentage est utilisé, le pourcentage est celui de la boîte contenant.
Les propriétés CSS suivantes peuvent être utilisées pour contrôler les listes. Vous pouvez également définir différentes valeurs pour le remplissage de chaque côté de la boîte en utilisant les propriétés suivantes -
le padding-bottom spécifie le remplissage inférieur d'un élément.
le padding-top spécifie le remplissage supérieur d'un élément.
le padding-left spécifie le remplissage à gauche d'un élément.
le padding-right spécifie le remplissage droit d'un élément.
le padding sert de raccourci pour les propriétés précédentes.
Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.
La propriété padding-bottom
La propriété padding-bottom définit le remplissage inférieur (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété padding-top
La propriété padding-top définit le remplissage supérieur (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété padding-left
La propriété padding-left définit le remplissage gauche (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété padding-right
La propriété padding-right définit le remplissage droit (espace) d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété Padding
La propriété padding définit le remplissage (espace) gauche, droit, haut et bas d'un élément. Cela peut prendre une valeur en termes de longueur de%.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Il produira le résultat suivant -