Comment gérer l'espacement et le remplissage dans les conceptions réactives

Ce guide pratique illustrera la méthode de gestion de l'espacement et du remplissage dans les conceptions réactives.

Comment gérer l'espacement et le remplissage dans les conceptions réactives ?

Le remplissage et l'espacement dans les conceptions réactives peuvent être gérés à l'aide de CSS. Une démonstration pratique de la gestion de l’espacement et du remplissage est fournie ci-dessous.

Étape 1 : Créer une structure HTML

Tout d’abord, créez une structure HTML et du texte à l’intérieur en utilisant

et

Mots clés:

< corps >
< h2 > Remplissage et espacement CSS réactifs < / h2 >
< div > Cet élément CSS a un remplissage de 80 px et un espacement de 40 px. < / div >
< / corps >

Étape 2 : Appliquer CSS

---

---

Maintenant, appliquons CSS sur le

étiqueter. Tout d’abord, définissez le « rembourrage « valeur de la propriété à » 80px » pour créer l'espace autour de l'élément. Ensuite, définissez le « marge « valeur de la propriété à » 40px » et créez un espace autour des éléments en dehors de la frontière. Enfin, utilisez le ' frontière ' et spécifiez la bordure et la couleur pour créer une bordure :

div {
rembourrage : 80px ;
marge : 40px ;
frontière : 1px solide vert ;
}

La sortie ci-dessus confirme que l'espacement et le remplissage ont été appliqués.

Vérifions s'il est responsive ou non en contractant la fenêtre du navigateur :

En contractant la fenêtre, le contenu s'est comporté de manière réactive, ce qui confirme que le remplissage et l'espacement appliqués sont réactifs.

Conclusion

Pour gérer l'espacement et le remplissage dans les conceptions réactives, il existe des propriétés CSS. Pour ajouter un remplissage dans le design réactif en utilisant le «  rembourrage ' propriété. De même, un espacement peut être ajouté dans la conception réactive en utilisant le «  marge ' propriété. Cet article a présenté aux utilisateurs une solution pour gérer l'espacement et le remplissage dans les conceptions réactives.