Dans Tailwind CSS, le rembourrage est utilisé pour ajouter de l'espace entre le contenu de l'élément spécifique et ses bordures. Il ajoute un espacement supplémentaire à l'intérieur de l'élément. Tailwind CSS fournit un ensemble d'utilitaires de remplissage et de valeurs de remplissage qui permettent aux utilisateurs de personnaliser l'espacement des éléments souhaités. De plus, les utilisateurs peuvent ajouter un rembourrage à un seul côté, comme le haut, le bas, la gauche ou la droite d'un élément particulier.
Ce blog montrera les exemples pour ajouter un rembourrage à un seul côté d'un élément dans Tailwind CSS.
Comment ajouter du rembourrage à un seul côté dans Tailwind ?
Pour ajouter un rembourrage à un seul côté d'un élément dans Tailwind, les classes utilitaires suivantes peuvent être utilisées :
Pour mieux comprendre, consultez les exemples ci-dessous.
Exemple 1 : Ajouter un rembourrage en haut d'un élément
Dans cet exemple, nous utiliserons le ' pt-10 ' classe d'utilité dans le ' Exemple 2 : Ajouter un rembourrage au bas d'un élément Dans cet exemple, nous utiliserons le ' pb-10 'classe dans le' Exemple 3 : Ajouter un rembourrage à droite d'un élément Dans cet exemple, nous utiliserons le ' pr-10 'classe dans le' Exemple 4 : Ajouter un rembourrage à gauche d'un élément Dans cet exemple, nous utiliserons le ' pl-10 'classe dans le' Pour ajouter un rembourrage à un seul côté d'un élément dans Tailwind, diverses classes utilitaires peuvent être utilisées, telles que ' pl-
< div classe = 'bg-rose-600 pt-10 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Sortir
La sortie ci-dessus montre que le rembourrage a été ajouté en haut du conteneur.
< div classe = 'bg-rose-600 pb-10 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Sortir 
On peut voir que le rembourrage a été ajouté au fond du conteneur.
< div classe = 'bg-rose-600 pr-10 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Sortir 
La sortie ci-dessus montre que le rembourrage a été ajouté à droite de l'élément conteneur.
< div classe = 'bg-rose-600 pl-10 w-max' >
Rembourrage dans CSS vent arrière
div >
corps >
Sortir 
On peut observer que le rembourrage a été ajouté à gauche du conteneur. Conclusion