Το Tailwind CSS είναι ένα πολύ γνωστό πλαίσιο που χρησιμοποιείται για τη δημιουργία προσαρμόσιμων και ανταποκρινόμενων ιστοσελίδων ή σχεδίων. Επιτρέπει επίσης στους χρήστες να ελέγχουν τη διάταξη και την απόσταση των στοιχείων χωρίς να γράφουν κάποιο προσαρμοσμένο CSS. Το padding είναι ο χώρος μεταξύ του περιεχομένου του συγκεκριμένου στοιχείου και του περιγράμματός του. Μερικές φορές, οι χρήστες θέλουν να εφαρμόσουν την ίδια ποσότητα πλήρωσης σε κάθε πλευρά ενός στοιχείου. Το Tailwind παρέχει κατηγορίες χρησιμότητας για την εφαρμογή padding σε όλες τις πλευρές ενός στοιχείου ή σε συγκεκριμένες πλευρές, όπως πάνω, δεξιά, κάτω ή αριστερά.
Αυτό το άρθρο θα εξηγήσει τη μέθοδο προσθήκης padding σε όλες τις πλευρές ενός στοιχείου στο Tailwind.
Πώς να προσθέσετε padding σε όλες τις πλευρές στο Tailwind;
Για να προσθέσετε padding σε όλες τις πλευρές ενός συγκεκριμένου στοιχείου στο Tailwind, δημιουργήστε μια δομή HTML. Στη συνέχεια, χρησιμοποιήστε την κλάση βοηθητικού προγράμματος 'p-
Σύνταξη
< στοιχείο τάξη = 'p-<τιμή>' ... στοιχείο >
Αντικαταστήστε το '<τιμή>' με οποιονδήποτε επιθυμητό αριθμό, όπως 2, 4, 12, 20 κ.λπ.
Παράδειγμα
Σε αυτό το παράδειγμα, έχουμε δύο ' Στο δεύτερο Παραγωγή Για να προσθέσετε padding σε όλες τις πλευρές ενός στοιχείου στο Tailwind, η κλάση βοηθητικού προγράμματος 'p-
< σώμα >
< div τάξη = 'bg-pink-600 p-8 w-max' >
Υλικό παραγεμίσματος σε Tailwind CSS
div >
< br >
< div τάξη = 'bg-teal-600 p-14 w-max' >
Υλικό παραγεμίσματος σε Tailwind CSS
div >
σώμα >
Εδώ, στο πρώτο
Σύμφωνα με την παραπάνω έξοδο, η καθορισμένη επένδυση έχει εφαρμοστεί σε όλες τις πλευρές και των δύο δοχείων. συμπέρασμα