Dans Tailwind CSS, rembourrage est l'espace entre le contenu de l'élément spécifique et sa bordure. Rembourrage horizontal est l'espace à gauche et à droite de l'élément, alors que rembourrage vertical est l'espace en haut et en bas d'un élément. Tailwind propose différentes classes utilitaires pour ajouter un rembourrage horizontal ou vertical aux éléments souhaités.
Cet article illustrera :
Comment ajouter un rembourrage horizontal dans Tailwind ?
Pour ajouter un rembourrage horizontal à un élément dans Tailwind, la classe 'px-
Syntaxe
< élément classe = 'px-0 ...' > ... élément >
Ici, 'px' représente 'l'axe des x' ou 'remplissage horizontal'.
Exemple : application d'un remplissage horizontal à un élément HTML
Dans cet exemple, nous utiliserons le ' px-20 ' classe utilitaire avec le ' Pour ajouter un rembourrage vertical à un élément dans Tailwind, utilisez le ' py- Syntaxe Exemple : application d'un remplissage vertical à un élément HTML Dans cet exemple, nous utiliserons le ' py-20 ' classe utilitaire avec le ' Pour ajouter le rembourrage horizontal et vertical dans Tailwind, le ' px-
< corps >
< div classe = 'bg-rose-600 px-20 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Sortir 
La sortie ci-dessus montre le rembourrage sur les côtés gauche et droit du conteneur. Cela indique que le rembourrage horizontal a été appliqué avec succès à l'élément conteneur. Comment ajouter un rembourrage vertical dans Tailwind ?
Ici, 'py' représente 'l'axe y' ou 'remplissage vertical'.
< div classe = 'bg-rose-600 py-20 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Sortir 
La sortie ci-dessus montre le remplissage des côtés supérieur et inférieur du conteneur. Cela indique que le rembourrage vertical a été effectivement appliqué à l'élément conteneur. Conclusion