Αυτή η ανάρτηση περιγράφει:
- Πότε να χρησιμοποιήσετε το 'padding' έναντι του 'margin' στο CSS;
- Πώς να χρησιμοποιήσετε το 'περιθώριο' στο CSS;
- Πώς να χρησιμοποιήσετε το 'padding' στο CSS;
Πότε να χρησιμοποιήσετε το 'padding' έναντι του 'margin' στο CSS;
CSS ' περιθώριο ' και ' υλικό παραγεμίσματος Οι ιδιότητες χρησιμοποιούνται για το σχεδιασμό της διεπαφής. Χρησιμοποιούνται επίσης για τον καθορισμό του επιπλέον κενού ή χώρου μεταξύ των στοιχείων. Ωστόσο, αυτές οι δύο ιδιότητες διαφέρουν μεταξύ τους ως προς τη λειτουργικότητα.
Εδώ, θα εξηγήσουμε μερικές διακρίσεις μεταξύ των δύο ιδιοτήτων:
| περιθώριο | υλικό παραγεμίσματος |
|---|---|
| Το περιθώριο παρέχει χώρο έξω από το στοιχείο. | Το padding παρέχει χώρο μέσα στο περιεχόμενο του στοιχείου. |
| Μπορούμε να ορίσουμε ένα περιθώριο στοιχείου ως ' αυτο ” για να ορίσετε αυτόματα το περιθώριο γύρω από το στοιχείο. | Η πλήρωση δεν μπορεί να οριστεί ως αυτόματη. Ο χρήστης πρέπει να καθορίσει τις τιμές για να ορίσει το χώρο μέσα στο στοιχείο. |
| Το περιθώριο δεν έχει επηρεάσει το στυλ ενός στοιχείου. | Όταν εφαρμόζουμε χρώμα φόντου στο στοιχείο, αυτό θα επηρεάσει το στυλ ενός στοιχείου. |
| Μπορούμε να ορίσουμε θετικές αλλά και αρνητικές τιμές ως περιθώρια. | Το padding υποστηρίζει μόνο θετικές τιμές. |
Πώς να χρησιμοποιήσετε το 'περιθώριο' στο CSS;
Για να χρησιμοποιήσετε το « περιθώριο 'ιδιότητα, πρώτα, δημιουργήστε ένα ' Το αποτέλεσμα του παραπάνω κωδικού αναφέρεται παρακάτω: Τώρα, δημιουργήστε ένα άλλο ' Παραγωγή Τώρα, εφαρμόστε την ιδιότητα 'margin' στην κλάση '.margin-div': Στον παραπάνω κώδικα, το « .margin-div ' χρησιμοποιείται για πρόσβαση στο στοιχείο div για την εφαρμογή των παρακάτω ιδιοτήτων: Εδώ, μπορείτε να δείτε ότι έχουμε ορίσει με επιτυχία το ' περιθώριο “Ακίνητο στο δεύτερο” div ' στοιχείο: Για να χρησιμοποιηθεί η ιδιότητα 'padding', χρησιμοποιήθηκαν τα παραπάνω παραδείγματα. Στο δεύτερο ' div 'κοντέινερ, χρησιμοποιήστε την κλάση' padding-div ” για να εφαρμόσετε γέμιση: Παραγωγή Για να εφαρμόσετε padding και άλλες ιδιότητες CSS στο ' .padding-div ” τάξη, ρίξτε μια ματιά στον παρεχόμενο κωδικό: Στον προαναφερθέντα κώδικα, αποκτήσαμε πρόσβαση στο δεύτερο ' div 'στοιχείο που χρησιμοποιεί κλάση' .padding-div '. Έχουμε ορίσει το «χρώμα φόντου» και το «μέγεθος γραμματοσειράς». Επιπλέον, το « υλικό παραγεμίσματος Η ιδιότητα ' χρησιμοποιείται για την προσθήκη χώρου γύρω από το περιεχόμενο του στοιχείου από κάθε πλευρά ως ' 50 εικονοστοιχεία '. Παραγωγή Έχουμε εξηγήσει τις διαφορές και τις χρήσεις του 'padding' και του 'margin' στο CSS. Το CSS ' περιθώριο ' χρησιμοποιείται για να ορίσει το διάστημα γύρω από το στοιχείο, ενώ το ' υλικό παραγεμίσματος ' χρησιμοποιείται για την προσθήκη διαστήματος γύρω από το περιεχόμενο του στοιχείου. Για να εφαρμόσετε την ιδιότητα περιθωρίου ή συμπλήρωσης, πρώτα δημιουργήστε ένα ' div ” κοντέινερ και καθορίστε την κλάση. Μετά από αυτό, αποκτήστε πρόσβαση στην τάξη με βάση το όνομα της τάξης και εφαρμόστε το ' περιθώριο ' και ' υλικό παραγεμίσματος ' ιδιότητες. Αυτή η ανάρτηση έχει εξηγήσει τη χρήση του περιθωρίου έναντι της συμπλήρωσης στο CSS.
< div τάξη = 'linux' >
< Π > Το Linuxhint είναι ένας από τους καλύτερους δικτυακούς τόπους εκμάθησης < / Π >
< / div >
< div τάξη = 'margin-div' στυλ = 'border: 1px συμπαγές μαύρο' >
< Π >Το Linuxhint είναι ένας από τους καλύτερους ιστοτόπους οδηγών.< br >
< / Π >
< div >
Ιστορικό- χρώμα : rgb ( 199 , 238 , 205 ) ;
γραμματοσειρά- Μέγεθος : Μεσαίο;
σύνορο : 3px rgb ( 114 , 250 , 114 ) ;
περιθώριο: 100px 100px 100px 100px;
}
Πώς να χρησιμοποιήσετε το 'padding' στο CSS;
< Π > Το Linuxhint είναι ένας από τους καλύτερους δικτυακούς τόπους εκμάθησης < / Π >
< / div >
< div τάξη = 'padding-div' στυλ = 'border: 1px συμπαγές μαύρο' >
< Π >Το Linuxhint είναι ένας από τους καλύτερους ιστοτόπους οδηγών.< br >
< / Π >
< / div >
Ιστορικό- χρώμα : rgb ( 199 , 238 , 205 ) ;
γραμματοσειρά- Μέγεθος : Μεσαίο;
padding: 50px 50px 50px 50px;
}
συμπέρασμα