Στο Tailwind CSS, α περιθώριο χρησιμοποιείται για τον έλεγχο της απόστασης γύρω από το συγκεκριμένο στοιχείο. Προσθέτει χώρο μεταξύ του εφαρμοζόμενου στοιχείου και των γύρω στοιχείων του. Το Tailwind CSS παρέχει ένα σύνολο βοηθητικών προγραμμάτων περιθωρίου και τιμών περιθωρίου που επιτρέπει στους χρήστες να προσαρμόσουν το διάστημα γύρω από τα επιθυμητά στοιχεία. Επιπλέον, οι χρήστες μπορούν να προσθέσουν ένα περιθώριο σε μια μεμονωμένη πλευρά, όπως το επάνω, κάτω, αριστερά ή δεξιά ενός συγκεκριμένου στοιχείου.
Αυτό το ιστολόγιο θα παρουσιάσει παραδείγματα για την προσθήκη περιθωρίου σε μια μεμονωμένη πλευρά ενός στοιχείου στο Tailwind CSS.
Πώς να προσθέσετε περιθώριο σε μια μεμονωμένη πλευρά στο Tailwind;
Για να προσθέσετε περιθώριο σε μια μεμονωμένη πλευρά ενός στοιχείου στο Tailwind, μπορούν να χρησιμοποιηθούν οι ακόλουθες κατηγορίες βοηθητικών προγραμμάτων:
Για να το καταλάβετε καλύτερα, διαβάστε τα παρακάτω παραδείγματα.
Παράδειγμα 1: Προσθήκη περιθωρίου στην κορυφή ενός στοιχείου
Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' mt-14 ' τάξη χρησιμότητας στο ' Παραγωγή Παράδειγμα 2: Προσθήκη περιθωρίου στο κάτω μέρος ενός στοιχείου Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' mb-14 'τάξη στην ' Παράδειγμα 3: Προσθήκη περιθωρίου στα αριστερά ενός στοιχείου Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' ml-14 'τάξη στην ' Παράδειγμα 4: Προσθήκη περιθωρίου στα δεξιά ενός στοιχείου Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' mr-14 «τάξη στην « Για να προσθέσετε περιθώριο σε μια μεμονωμένη πλευρά ενός στοιχείου στο Tailwind, μπορούν να χρησιμοποιηθούν διάφορες κατηγορίες βοηθητικών προγραμμάτων, όπως ' ml-<τιμή> », « mr-<τιμή> », « mt-<τιμή> ', και ' mb-<τιμή> '. Αυτές οι κλάσεις προσθέτουν περιθώριο στην αριστερή, δεξιά, πάνω και κάτω πλευρά του συγκεκριμένου στοιχείου αντίστοιχα. Οι χρήστες μπορούν να καθορίσουν διαφορετικές τιμές για το μέγεθος του περιθωρίου. Αυτό το ιστολόγιο έχει παρουσιάσει παραδείγματα για την προσθήκη περιθωρίου σε μια μεμονωμένη πλευρά ενός στοιχείου στο Tailwind CSS.
< div τάξη = 'h-96 mt-14 bg-purple-500' >
< Π τάξη = 'text-5xl text-center' > Περιθώριο σε Tailwind CSS Π >
div >
σώμα >
Εδώ:
Η παραπάνω έξοδος δείχνει ότι το περιθώριο έχει προστεθεί στην κορυφή του δοχείου.
< div τάξη = 'h-96 mb-14 bg-purple-500' >
< Π τάξη = 'text-5xl text-center' > Περιθώριο σε Tailwind CSS Π >
div >
σώμα >
Παραγωγή 
Φαίνεται ότι το περιθώριο έχει προστεθεί στον πάτο του δοχείου.
< div τάξη = 'h-96 ml-14 bg-μωβ-500' >
< Π τάξη = 'text-5xl text-center' > Περιθώριο σε Tailwind CSS Π >
div >
σώμα >
Παραγωγή 
Η παραπάνω έξοδος δείχνει ότι το περιθώριο έχει προστεθεί στα αριστερά του στοιχείου κοντέινερ.
< div τάξη = 'h-96 mr-14 bg-purple-500' >
< Π τάξη = 'text-5xl text-center' > Περιθώριο σε Tailwind CSS Π >
div >
σώμα >
Παραγωγή 
Όπως μπορείτε να δείτε, το περιθώριο προστέθηκε αποτελεσματικά στα δεξιά του κοντέινερ. συμπέρασμα