Αυτή η ανάρτηση επεξεργάζεται την πλήρη διαδικασία για την προσθήκη του κενού μεταξύ των στηλών στο Tailwind.
Πώς να προσθέσετε κενό μεταξύ στηλών στο Tailwind;
Για να προσθέσετε το κενό μεταξύ των στηλών στο Tailwind, χρησιμοποιήστε το ενσωματωμένο ' κενό-{μέγεθος} ” χρησιμότητα. Καθορίζει μια ακέραια τιμή που αντιπροσωπεύει το κενό μεταξύ των στηλών οριζόντια και κάθετα. Ας κάνουμε αυτήν την εργασία πρακτικά με τη βοήθεια των αναφερόμενων παραδειγμάτων.
Δομή αρχείου έργου
Ο ' κενό-{μέγεθος} Το βοηθητικό πρόγραμμα μπορεί να εφαρμοστεί σε οποιοδήποτε από τα έργα Tailwind που ακολουθούν τη δεδομένη δομή αρχείου:
Ας ξεκινήσουμε με το πρώτο παράδειγμα.
Παράδειγμα 1: Χρησιμοποιήστε το βοηθητικό πρόγραμμα 'gap-{size}' για να προσθέσετε το ίδιο κενό μεταξύ σειρών και στηλών
Αυτό το παράδειγμα εφαρμόζει το βοηθητικό πρόγραμμα 'gap-{size}' για να προσθέσετε το ίδιο κενό οριζόντια και κάθετα μεταξύ των δεδομένων στηλών.
Κώδικας HTML
Επισκόπηση του παρακάτω κώδικα:
< κεφάλι >
< Σύνδεσμος href = '/dist/output.css' σχετ = 'φύλλο στυλ' >
< / κεφάλι >
< σώμα >
< h1 τάξη = 'text-3xl font-bold text-center underline text-orange-600' > Καλώς ήρθατε στο Linuxhint! < / h1 >< br >
< div τάξη = 'mx-2 grid grid-cols-3 gap-4' >
< div τάξη = 'border-2 border-orange-600' > Πρώτο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > Δεύτερο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > Τρίτο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > Τέταρτο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > πέμπτο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > Έκτο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > Έβδομο φροντιστήριο < / div >
< div τάξη = 'border-2 border-orange-600' > Όγδοο φροντιστήριο < / div >
< / div >
<σώμα<
Στις παραπάνω γραμμές κώδικα:
- Πρώτα, συνδέστε το κύριο αρχείο CSS ' /dist/output.css 'με το υπάρχον αρχείο HTML' index.html ' χρησιμοποιώντας την ' <σύνδεσμος> ' στην ενότητα 'κεφάλι'.
- Στη συνέχεια, η ενότητα 'σώμα' δημιουργεί ένα στοιχείο '
' που χρησιμοποιεί το ' Μέγεθος γραμματοσειράς », « Βάρος γραμματοσειράς », « Στοίχιση κειμένου », « Διακόσμηση κειμένου ', και το ' Χρώμα κειμένου ” Τάξεις ουράνιου ανέμου, αντίστοιχα.
- Μετά από αυτό, προστίθεται ένα στοιχείο '' που εφαρμόζει το ' πλέγμα ' βοηθητικό πρόγραμμα για να ορίσετε το περιεχόμενό του στον αναφερόμενο αριθμό διατάξεων πλέγματος, το ' περιθώριο ' κλάση για να ορίσετε το οριζόντιο περιθώριο και το ' χάσμα ” βοηθητικό πρόγραμμα για την προσθήκη του καθορισμένου κενού μεταξύ των στηλών.
- Στην ενότητα σώματος στοιχείου '
', περιλαμβάνονται επιπλέον οκτώ στοιχεία '' που χρησιμοποιούν το ' Πλάτος περιγράμματος ' και το ' Χρώμα πλαισίου ” τάξεις, αντίστοιχα.Παραγωγή
Εκτελέστε τον παραπάνω κώδικα HTML στον ζωντανό διακομιστή και αναλύστε την έξοδο:
Όπως φαίνεται, η έξοδος προσθέτει το καθορισμένο κενό μεταξύ των στηλών και στις δύο διαστάσεις κατάλληλα.
Παράδειγμα 2: Χρησιμοποιήστε το βοηθητικό πρόγραμμα 'gap-{size}' για να προσθέσετε ένα κενό μεταξύ σειρών και στηλών ανεξάρτητα
Ο ' κενό-{μέγεθος} Το βοηθητικό πρόγραμμα μπορεί επίσης να υλοποιηθεί με διαστάσεις 'x(horizontal)' και 'y(vertical)' ως 'gap-x-{size}' για τις γραμμές και το 'gap-y-{size}' για στήλες για την προσθήκη του κενό μεταξύ τους μεμονωμένα.Ας δούμε την πρακτική εφαρμογή του.
Κώδικας HTML
< κεφάλι >
Ρίξτε μια ματιά στον κωδικό που δίνεται:
< Σύνδεσμος href = '/dist/output.css' σχετ = 'φύλλο στυλ' >
< / κεφάλι >
< σώμα >
< div τάξη = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div τάξη = 'border-2 border-orange-600' >Πρώτο σεμινάριο< / div >
< div τάξη = 'border-2 border-orange-600' >Δεύτερο μάθημα< / div >
< div τάξη = 'border-2 border-orange-600' >Τρίτο φροντιστήριο< / div >
< div τάξη = 'border-2 border-orange-600' >Τέταρτο φροντιστήριο< / div >
< div τάξη = 'border-2 border-orange-600' >Πέμπτο φροντιστήριο< / div >
< div τάξη = 'border-2 border-orange-600' >Έκτη Εκμάθηση< / div >
< div τάξη = 'border-2 border-orange-600' >Έβδομο φροντιστήριο< / div >
< div τάξη = 'border-2 border-orange-600' >Όγδοο Φροντιστήριο< / div >
< / div >
< σώμα >Εδώ, το « κενό-x-{μέγεθος} Το βοηθητικό πρόγραμμα ' προσθέτει το κενό μεταξύ των σειρών και το ' κενό-y-{μέγεθος} ” προσθέτει το καθορισμένο κενό μεταξύ των στηλών ανεξάρτητα.
Παραγωγή
Το παραπάνω αποτέλεσμα επαληθεύει ότι το κενό μεταξύ σειρών και στηλών εφαρμόζεται ανάλογα.
συμπέρασμα
Το 'Tailwind CSS' παρέχει ένα ενσωματωμένο ' κενό-{μέγεθος} ” βοηθητικό πρόγραμμα για την προσθήκη του κενού μεταξύ των στηλών. Μπορεί επίσης να χρησιμοποιηθεί για την προσθήκη του κενού μεταξύ σειρών και στηλών ξεχωριστά μέσω του ' κενό-x-{μέγεθος} ' και το ' κενό-y-{μέγεθος} ” βοηθητικά προγράμματα. Αυτή η ανάρτηση παρείχε την πλήρη διαδικασία για την προσθήκη του κενού μεταξύ των στηλών στο Tailwind.
- Στην ενότητα σώματος στοιχείου '