Στο Tailwind CSS, υλικό παραγεμίσματος είναι ο χώρος μεταξύ του περιεχομένου του συγκεκριμένου στοιχείου και του ορίου του. Οριζόντια επένδυση είναι ο χώρος στην αριστερή και δεξιά πλευρά του στοιχείου, ενώ κάθετη επένδυση είναι ο χώρος στο πάνω και στο κάτω μέρος ενός στοιχείου. Το Tailwind προσφέρει διάφορες κατηγορίες χρησιμότητας για να προσθέσετε οριζόντια ή κάθετη επένδυση στα επιθυμητά στοιχεία.
Αυτό το άρθρο θα επεξηγήσει:
Πώς να προσθέσετε οριζόντια επένδυση στο Tailwind;
Για να προσθέσετε οριζόντια συμπλήρωση σε ένα στοιχείο στο Tailwind, η κλάση 'px-
Σύνταξη
< στοιχείο τάξη = 'px-0 ...' > ... στοιχείο >
Εδώ το 'px' αντιπροσωπεύει τον 'άξονα x' ή 'οριζόντια επένδυση'.
Παράδειγμα: Εφαρμογή οριζόντιας συμπλήρωσης σε ένα στοιχείο HTML
Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' px-20 ' τάξη χρησιμότητας με το ' Για να προσθέσετε κάθετη πλήρωση σε ένα στοιχείο στο Tailwind, χρησιμοποιήστε το ' py-<τιμή> ” κλάση βοηθητικού προγράμματος με το συγκεκριμένο στοιχείο στο πρόγραμμα HTML. Αυτή η κλάση προσθέτει επένδυση κατά μήκος του άξονα y, δηλαδή τόσο στην επάνω όσο και στην κάτω πλευρά του στοιχείου. Σύνταξη Παράδειγμα: Εφαρμογή κάθετης συμπλήρωσης σε ένα στοιχείο HTML Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' py-20 ' τάξη χρησιμότητας με το ' Για να προσθέσετε την οριζόντια και κάθετη γέμιση στο Tailwind, το ' px-<τιμή> ' και ' py-<τιμή> Οι κλάσεις βοηθητικών προγραμμάτων χρησιμοποιούνται με τα επιθυμητά στοιχεία στο πρόγραμμα HTML αντίστοιχα. Οι χρήστες μπορούν να καθορίσουν διαφορετικές τιμές για να εφαρμόσουν padding αριστερά και δεξιά ή πάνω και κάτω ενός στοιχείου. Αυτό το άρθρο επεξηγεί την πλήρη μέθοδο εφαρμογής οριζόντιας και κάθετης επένδυσης στο Tailwind.
< σώμα >
< div τάξη = 'bg-pink-600 px-20 w-max' >
Υλικό παραγεμίσματος σε Tailwind CSS
div >
σώμα >
Παραγωγή
Η παραπάνω έξοδος δείχνει την επένδυση στην αριστερή και δεξιά πλευρά του δοχείου. Αυτό υποδηλώνει ότι η οριζόντια επένδυση έχει εφαρμοστεί με επιτυχία στο στοιχείο του δοχείου. Πώς να προσθέσετε κάθετη επένδυση στο Tailwind;
Εδώ το 'py' αντιπροσωπεύει τον 'άξονα y' ή την 'κάθετη επένδυση'.
< div τάξη = 'bg-pink-600 py-20 w-max' >
Υλικό παραγεμίσματος σε Tailwind CSS
div >
σώμα >
Παραγωγή
Η παραπάνω έξοδος δείχνει την επένδυση στην επάνω και στην κάτω πλευρά του δοχείου. Αυτό δείχνει ότι η κατακόρυφη επένδυση έχει εφαρμοστεί αποτελεσματικά στο στοιχείο δοχείου. συμπέρασμα