Πώς να προσθέσετε padding σε όλες τις πλευρές στο Tailwind;

Pos Na Prosthesete Padding Se Oles Tis Pleures Sto Tailwind



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

Αυτό το άρθρο θα εξηγήσει τη μέθοδο προσθήκης padding σε όλες τις πλευρές ενός στοιχείου στο Tailwind.







Πώς να προσθέσετε padding σε όλες τις πλευρές στο Tailwind;

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



Σύνταξη



< στοιχείο τάξη = 'p-<τιμή>' ... στοιχείο >


Αντικαταστήστε το '<τιμή>' με οποιονδήποτε επιθυμητό αριθμό, όπως 2, 4, 12, 20 κ.λπ.





Παράδειγμα

Σε αυτό το παράδειγμα, έχουμε δύο '

' στοιχεία και θα εφαρμόσουμε δύο διαφορετικά paddings π.χ. σ-8 ' και ' σελ-14 ' σε αυτους:



< σώμα >

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

< br >

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

σώμα >


Εδώ, στο πρώτο

:

    • ' bg-ροζ-600 Η κλάση ορίζει το ροζ χρώμα στο φόντο του στοιχείου
      .
    • ' σ-8 Η κλάση προσθέτει τις 8 μονάδες επένδυσης σε όλες τις πλευρές του δοχείου.
    • ' w-max Η κλάση θέτει το πλάτος του στοιχείου
      στο μέγιστο πλάτος περιεχομένου του.

Στο δεύτερο

:

    • ' bg-teal-600 Η τάξη ορίζει το γαλαζοπράσινο χρώμα στο φόντο του στοιχείου
      .
    • ' σελ-14 Η κλάση εφαρμόζει 14 μονάδες επένδυσης σε όλες τις πλευρές του δοχείου.
    • ' w-max Η κλάση θέτει το πλάτος του στοιχείου
      στο μέγιστο πλάτος περιεχομένου του.

Παραγωγή


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

συμπέρασμα

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