Πώς να προσθέσετε οριζόντια και κάθετη επένδυση στο Tailwind;

Pos Na Prosthesete Orizontia Kai Kathete Ependyse Sto Tailwind



Στο Tailwind CSS, υλικό παραγεμίσματος είναι ο χώρος μεταξύ του περιεχομένου του συγκεκριμένου στοιχείου και του ορίου του. Οριζόντια επένδυση είναι ο χώρος στην αριστερή και δεξιά πλευρά του στοιχείου, ενώ κάθετη επένδυση είναι ο χώρος στο πάνω και στο κάτω μέρος ενός στοιχείου. Το Tailwind προσφέρει διάφορες κατηγορίες χρησιμότητας για να προσθέσετε οριζόντια ή κάθετη επένδυση στα επιθυμητά στοιχεία.

Αυτό το άρθρο θα επεξηγήσει:







Πώς να προσθέσετε οριζόντια επένδυση στο Tailwind;

Για να προσθέσετε οριζόντια συμπλήρωση σε ένα στοιχείο στο Tailwind, η κλάση 'px-' χρησιμοποιείται με το επιθυμητό στοιχείο στο πρόγραμμα HTML. Οι χρήστες μπορούν να καθορίσουν διαφορετικές τιμές για το μέγεθος του padding. Αυτή η κλάση προσθέτει padding κατά μήκος του άξονα x, δηλαδή τόσο στην αριστερή όσο και στη δεξιά πλευρά του στοιχείου.



Σύνταξη



< στοιχείο τάξη = 'px-0 ...' > ... στοιχείο >


Εδώ το 'px' αντιπροσωπεύει τον 'άξονα x' ή 'οριζόντια επένδυση'.





Παράδειγμα: Εφαρμογή οριζόντιας συμπλήρωσης σε ένα στοιχείο HTML

Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' px-20 ' τάξη χρησιμότητας με το '

' στοιχείο για να προσθέσετε οριζόντια επένδυση σε αυτό:



< σώμα >

< div τάξη = 'bg-pink-600 px-20 w-max' >
Υλικό παραγεμίσματος σε Tailwind CSS
div >

σώμα >


Παραγωγή


Η παραπάνω έξοδος δείχνει την επένδυση στην αριστερή και δεξιά πλευρά του δοχείου. Αυτό υποδηλώνει ότι η οριζόντια επένδυση έχει εφαρμοστεί με επιτυχία στο στοιχείο του δοχείου.

Πώς να προσθέσετε κάθετη επένδυση στο Tailwind;

Για να προσθέσετε κάθετη πλήρωση σε ένα στοιχείο στο Tailwind, χρησιμοποιήστε το ' py-<τιμή> ” κλάση βοηθητικού προγράμματος με το συγκεκριμένο στοιχείο στο πρόγραμμα HTML. Αυτή η κλάση προσθέτει επένδυση κατά μήκος του άξονα y, δηλαδή τόσο στην επάνω όσο και στην κάτω πλευρά του στοιχείου.

Σύνταξη

< στοιχείο τάξη = 'py-0...' > ... στοιχείο >


Εδώ το 'py' αντιπροσωπεύει τον 'άξονα y' ή την 'κάθετη επένδυση'.

Παράδειγμα: Εφαρμογή κάθετης συμπλήρωσης σε ένα στοιχείο HTML

Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' py-20 ' τάξη χρησιμότητας με το '

' στοιχείο για να προσθέσετε κάθετη γέμιση σε αυτό:

< σώμα >

< div τάξη = 'bg-pink-600 py-20 w-max' >
Υλικό παραγεμίσματος σε Tailwind CSS
div >

σώμα >


Παραγωγή


Η παραπάνω έξοδος δείχνει την επένδυση στην επάνω και στην κάτω πλευρά του δοχείου. Αυτό δείχνει ότι η κατακόρυφη επένδυση έχει εφαρμοστεί αποτελεσματικά στο στοιχείο δοχείου.

συμπέρασμα

Για να προσθέσετε την οριζόντια και κάθετη γέμιση στο Tailwind, το ' px-<τιμή> ' και ' py-<τιμή> Οι κλάσεις βοηθητικών προγραμμάτων χρησιμοποιούνται με τα επιθυμητά στοιχεία στο πρόγραμμα HTML αντίστοιχα. Οι χρήστες μπορούν να καθορίσουν διαφορετικές τιμές για να εφαρμόσουν padding αριστερά και δεξιά ή πάνω και κάτω ενός στοιχείου. Αυτό το άρθρο επεξηγεί την πλήρη μέθοδο εφαρμογής οριζόντιας και κάθετης επένδυσης στο Tailwind.