Maison > Article > interface Web > Quelle propriété en CSS spécifie le bon remplissage d'un élément ?
Quelle propriété en CSS spécifie le bon remplissage d'un élément ?
- PHPzavant
- 2023-09-12 19:13:10597parcourir
En CSS, la propriété padding nous permet d'ajouter un espace supplémentaire entre la bordure d'un élément HTML et son contenu. Le remplissage à droite signifie uniquement ajouter de l'espace entre le contenu de l'élément et la bordure droite.
Ici, nous allons apprendre deux propriétés différentes pour spécifier le bon remplissage d'un élément.
Utiliser la propriété CSS padding-right
La propriété 'padding-right' spécifie le remplissage droit d'un élément en CSS. Chaque fois que nous spécifions le remplissage droit pour un élément, la largeur de l'élément est égale à la largeur réelle + le remplissage droit.
Grammaire
Les utilisateurs peuvent suivre la syntaxe ci-dessous pour spécifier le bon remplissage d'un élément.
padding-right: 100px;
Exemple 1
Dans l'exemple ci-dessous, le div parent contient plusieurs div enfants. En utilisant la propriété CSS "padding-right", nous spécifions un remplissage droit de "300px" pour le div parent. De plus, nous spécifions un droit de remplissage de 100 px pour tous les éléments div enfants.
Dans la sortie, l'utilisateur peut observer qu'il y a un espace de 300 px entre la bordure droite et le div enfant. De plus, il y a 100 pixels d’espace libre entre la bordure droite et le contenu du texte.
<html>
<style>
.parent {
width: 300px;
height: 400px;
border: 2px solid red;
padding-right: 300px;
display: flex;
flex-wrap: wrap;
}
.child {
width: 200px;
height: 100px;
border: 2px solid green;
padding-right: 100px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "parent">
<div class = "child"> This is a child div. </div>
<div class = "child"> This is a child div. </div>
<div class = "child"> This is a child div. </div>
</div>
</body>
</html>
Exemple 2
Dans l'exemple ci-dessous, nous avons créé un composant de carte et y avons ajouté une image. De plus, nous avons donné au div de la carte un remplissage droit de 10 px. Dans la sortie, l'utilisateur peut observer un espace de 10 px à droite.
<html>
<style>
.card {
width: 520px;
height: 100px;
background-color: grey;
padding-right: 10px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "card">
<img src = "https://www.tutorialspoint.com/images/logo.png" alt = "">
</div>
</body>
</html>
Utilisez les propriétés de remplissage CSS
La propriétépadding définit le remplissage sur les quatre côtés d'un élément. Nous pouvons définir le remplissage droit sur une valeur et les autres côtés sur 0. La première valeur représente le haut, la seconde représente la droite, la troisième représente le bas et la quatrième représente la gauche. Nous allons donc garder 0 comme valeur sauf pour la seconde.
Grammaire
Les utilisateurs peuvent utiliser la propriété CSS padding pour spécifier le bon remplissage d'un élément selon la syntaxe suivante.
padding: 0 value 0 0;
Exemple 3
Dans l'exemple ci-dessous, nous avons ajouté une carte div et ajouté du texte à l'intérieur du conteneur div. De plus, nous donnons un remplissage "5rem" sur le côté droit de l'élément div du conteneur. L'utilisateur peut observer l'espacement de 5rem entre la bordure droite du conteneur div et son contenu.
<html>
<style>
.container {
width: 10rem;
height: 10rem;
background-color: #f08a8a;
padding: 0 5rem 0 0;
}
</style>
<body>
<h3>Using the <i> padding CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "container">
<div class = "card">
<h3>This is a card inside the container div. The right padding is 2rem.</h3>
</div>
</div>
</body>
</html>
Les utilisateurs apprennent à spécifier le remplissage correct pour les éléments HTML et peuvent utiliser les propriétés CSS "padding-right" ou "padding". Si nous utilisons l'attribut padding, il suffit de spécifier la deuxième valeur et de laisser les autres valeurs à 0.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!