Margin vs Padding
Η διαφορά μεταξύ περιθωρίου και συμπλήρωσης είναι μια σημαντική πτυχή στο CSS, καθώς το περιθώριο και η συμπλήρωση είναι δύο σημαντικές έννοιες που χρησιμοποιούνται στο CSS για την παροχή απόστασης μεταξύ διαφορετικών στοιχείων. Η επένδυση και τα περιθώρια δεν είναι εναλλάξιμα και έχουν διαφορετικούς σκοπούς, επομένως πρέπει να χρησιμοποιούνται κατάλληλα. Το padding είναι ο χώρος μεταξύ του περιεχομένου και του περιγράμματος ενός μπλοκ. Το περιθώριο, από την άλλη πλευρά, είναι ο χώρος έξω από το όριο ενός μπλοκ. Το περιθώριο διαχωρίζει τα μπλοκ από τα γειτονικά μπλοκ ενώ το padding χωρίζει το περίγραμμα από το περιεχόμενο.
Τι είναι το padding;
Σε CSS (Cascading Style Sheets), το padding είναι ο χώρος που διατηρείται μεταξύ του περιεχομένου και του περιγράμματος. Διαχωρίζει το περιεχόμενο ενός μπλοκ από την άκρη του. Η επένδυση είναι διαφανής και περιλαμβάνει επίσης την εικόνα φόντου ή το χρώμα φόντου του στοιχείου. Το ποσό της συμπλήρωσης ενός στοιχείου καθορίζεται χρησιμοποιώντας τον όρο "πλήρωση" στον κώδικα CSS. Για παράδειγμα, για να προσθέσετε ένα padding 25 px γύρω από το περιεχόμενο μπορεί να χρησιμοποιηθεί ο ακόλουθος κώδικας.
div {
πλάτος: 300 px;
ύψος: 300px;
επένδυση: 25px;
περίγραμμα: 25px συμπαγές;
}
Εάν είναι απαραίτητο, μπορούν να καθοριστούν διαφορετικές τιμές πλήρωσης για το αριστερό, το δεξί, το επάνω και το κάτω μέρος επίσης. Το παρακάτω κομμάτι κώδικα καθορίζει διαφορετικές τιμές πλήρωσης για κάθε πλευρά.
div {
πλάτος: 300 px;
ύψος: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
περίγραμμα: 25px συμπαγές;
}
Τι είναι το περιθώριο;
Σε CSS (Cascading Style Sheets), το περιθώριο είναι ο χώρος έξω από το περίγραμμα. Διαχωρίζει ένα μπλοκ από άλλα μπλοκ. Το περιθώριο είναι επίσης διαφανές, αλλά μια μεγάλη διαφορά με το padding είναι ότι το περιθώριο δεν περιλαμβάνει εικόνες φόντου ή χρώματα φόντου που εφαρμόζονται στο στοιχείο. Το ποσό του περιθωρίου στο CSS καθορίζεται χρησιμοποιώντας τον όρο "περιθώριο". Το παρακάτω κομμάτι κώδικα εφάρμοσε ένα περιθώριο 25 εικονοστοιχείων γύρω από το μπλοκ div.
div {
πλάτος: 320 px;
ύψος: 320 px;
περίγραμμα: 5px συμπαγές;
περιθώριο: 25px;
}
Μπορούν επίσης να καθοριστούν διαφορετικές τιμές για διαφορετικές πλευρές του μπλοκ. Το παρακάτω κομμάτι κώδικα εφαρμόζει διαφορετικές τιμές περιθωρίου για κάθε πλευρά.
div {
πλάτος: 320 px;
ύψος: 320 px;
περίγραμμα: 5px συμπαγές;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
Ποια είναι η διαφορά μεταξύ Περιθωρίου και Επένδυσης;
• Η συμπλήρωση είναι το διάστημα μεταξύ του περιγράμματος και του περιεχομένου ενώ το περιθώριο είναι το διάστημα έξω από το περίγραμμα.
• Η συμπλήρωση διαχωρίζει το περιεχόμενο ενός μπλοκ από το περίγραμμα. Το περιθώριο χωρίζει το ένα μπλοκ από το άλλο.
• Η επένδυση αποτελείται από τις εικόνες φόντου και τα χρώματα φόντου που εφαρμόζονται στο περιεχόμενο, ενώ το περιθώριο δεν περιέχει τέτοιο περιεχόμενο.
• Τα περιθώρια των παρακείμενων μπλοκ μπορεί να επικαλύπτονται ενώ η επένδυση δεν επικαλύπτεται.
Σύνοψη:
Γέμισμα εναντίον Περιθωρίου
Η συμπλήρωση είναι ο χώρος μέσα στο περίγραμμα ενός μπλοκ που διαχωρίζει το περίγραμμα από το περιεχόμενο. Το περιθώριο είναι το διάστημα έξω από το περίγραμμα που χωρίζει ένα μπλοκ από τα διπλανά μπλοκ. Μια άλλη διαφορά είναι ότι το padding περιλαμβάνει την εικόνα φόντου και τα χρώματα φόντου που εφαρμόζονται γύρω από το περιεχόμενο, ενώ το περιθώριο δεν τα περιέχει. Τα περιθώρια των γειτονικών μπλοκ μπορεί μερικές φορές να επικαλύπτονται όταν το πρόγραμμα περιήγησης αποδίδει τη σελίδα, αλλά για την πλήρωση κάτι τέτοιο δεν θα συμβεί.
