Τα περιθώρια (margins) χρησιμοποιούνται για να δημιουργήσουν χώρο γύρω από τα στοιχεία, έξω από τα ορισμένα περιγράμματα.
Στη CSS, μπορείτε να ορίσετε τα περιθώρια για ένα στοιχείο χρησιμοποιώντας τις εξής ιδιότητες:
margin-top: Ορίζει το περιθώριο στην επάνω πλευρά του στοιχείου.margin-right: Ορίζει το περιθώριο στη δεξιά πλευρά του στοιχείου.margin-bottom: Ορίζει το περιθώριο στην κάτω πλευρά του στοιχείου.margin-left: Ορίζει το περιθώριο στην αριστερή πλευρά του στοιχείου.
Μπορείτε να χρησιμοποιήσετε αυτές τις ιδιότητες για να ορίσετε τα περιθώρια για ένα στοιχείο. Οι τιμές των περιθωρίων μπορούν να είναι σε διάφορες μονάδες μέτρησης, όπως px, %, em, κ.λπ.
Παράδειγμα:
.element {
margin-top: 10px; /* Ορίζει ένα περιθώριο 10px στην επάνω πλευρά του στοιχείου */
margin-right: 20px; /* Ορίζει ένα περιθώριο 20px στη δεξιά πλευρά του στοιχείου */
margin-bottom: 15px; /* Ορίζει ένα περιθώριο 15px στην κάτω πλευρά του στοιχείου */
margin-left: 25px; /* Ορίζει ένα περιθώριο 25px στην αριστερή πλευρά του στοιχείου */
}
Στο παραπάνω παράδειγμα, ορίζουμε διάφορα περιθώρια για το στοιχείο .element. Μπορείτε να προσαρμόσετε τις τιμές των ιδιοτήτων margin-top, margin-right, margin-bottom και margin-left για να επιτύχετε το επιθυμητό περιθώριο για τα στοιχεία σας.
Κάθε ιδιότητα περιθώριου στη γλώσσα CSS μπορεί να έχει μία από τις ακόλουθες τιμές:
- Η τιμή “auto” σημαίνει ότι ο φυλλομετρητής υπολογίζει το περιθώριο αυτόματα, με βάση το περιεχόμενο του στοιχείου.
- Μπορούμε να ορίσουμε ένα συγκεκριμένο μήκος (π.χ. px, pt, cm κ.λπ.) για το περιθώριο, χρησιμοποιώντας μία μονάδα μέτρησης. Αυτό καθορίζει ένα σταθερό περιθώριο με συγκεκριμένο μήκος.
- Μπορούμε επίσης να χρησιμοποιήσουμε το ποσοστό (%) για να ορίσουμε ένα περιθώριο που θα είναι ένα ποσοστό του πλάτους του γονικού στοιχείου.
- Η τιμή “inherit” καθορίζει ότι το περιθώριο θα κληρονομηθεί από το γονικό στοιχείο. Με αυτόν τον τρόπο, το στοιχείο θα έχει το ίδιο περιθώριο με το γονικό του στοιχείο.
Ανάλογα με τις ανάγκες μας, μπορούμε να επιλέξουμε την κατάλληλη τιμή για την ιδιότητα περιθώριου που επιθυμούμε να διαμορφώσουμε στο στοιχείο μας.
Συμβουλή: Επιτρέπονται αρνητικές τιμές για τα περιθώρια.
[adinserter block=”2″]
Μπορείτε να χρησιμοποιήσετε αυτές τις τιμές για να ορίσετε τα περιθώρια για ένα στοιχείο, ανάλογα με τις απαιτήσεις της διάταξης και του σχεδιασμού της ιστοσελίδας σας.
Για να μειώσετε τον κώδικα, είναι δυνατόν να καθορίσετε όλες τις ιδιότητες περιθωρίων σε μία ιδιότητα.
Η ιδιότητα margin είναι μια συντομογραφία για τις ακόλουθες ξεχωριστές ιδιότητες περιθωρίων:
margin-topmargin-rightmargin-bottommargin-left
Μπορείτε να χρησιμοποιήσετε αυτήν τη συντομογραφία για να ορίσετε όλες τις ιδιότητες περιθωρίων για ένα στοιχείο με μία μόνο καταχώριση.
Παράδειγμα:
.element {
margin: 10px; /* Ορίζει το περιθώριο 10px για όλες τις πλευρές του στοιχείου */
}
.container {
margin: 10px 20px; /* Ορίζει το περιθώριο 10px για την επάνω και κάτω πλευρά και 20px για τη δεξιά και αριστερή πλευρά του στοιχείου */
}
.section {
margin: 10px 20px 30px; /* Ορίζει το περιθώριο 10px για την επάνω, 20px για τη δεξιά και αριστερή πλευρά και 30px για την κάτω πλευρά του στοιχείου */
}
.box {
margin: 10px 20px 30px 40px; /* Ορίζει το περιθώριο 10px για την επάνω, 20px για τη δεξιά, 30px για την κάτω και 40px για την αριστερή πλευρά του στοιχείου */
}
Στα παραπάνω παραδείγματα, χρησιμοποιούμε τη συντομογραφία margin για να ορίσουμε τα περιθώρια για τα στοιχεία .element, .container, .section και .box. Μπορείτε να προσαρμόσετε τις τιμές στην ιδιότητα margin για να επιτύχετε τα επιθυμητά περιθώρια για τα στοιχεία σας.
Μπορείτε να ορίσετε την ιδιότητα margin σε auto για να κεντράρετε οριζόντια το στοιχείο μέσα στον περιέκτη του.
Το στοιχείο θα πάρει τον καθορισμένο πλάτος και ο υπόλοιπος χώρος θα μοιραστεί από τα ίσα μεταξύ των αριστερών και δεξιών περιθωρίων.
[adinserter block=”3″]
Παράδειγμα:
.element {
width: 200px; /* Ορίζει το πλάτος του στοιχείου */
margin-left: auto; /* Κεντράρει οριζόντια το στοιχείο χρησιμοποιώντας το αυτόματο περιθώριο αριστερά */
margin-right: auto; /* Κεντράρει οριζόντια το στοιχείο χρησιμοποιώντας το αυτόματο περιθώριο δεξιά */
}
Στο παραπάνω παράδειγμα, ορίζουμε το πλάτος του στοιχείου .element σε 200px και χρησιμοποιούμε το αυτόματο περιθώριο για τα αριστερά και δεξιά περιθώρια για να κεντράρουμε οριζόντια το στοιχείο μέσα στον περιέκτη του.
Το παρακάτω παράδειγμα επιτρέπει την κληρονομικότητα του αριστερού περιθωρίου του στοιχείου <p class="ex1"> από το γονικό στοιχείο <div>:
div {
margin-left: 20px; /* Ορίζει το αριστερό περιθώριο του γονικού στοιχείου */
}
p.ex1 {
margin-left: inherit; /* Κληρονομεί το αριστερό περιθώριο από το γονικό στοιχείο */
}
Στο παραπάνω παράδειγμα, το γονικό στοιχείο <div> έχει οριστεί να έχει ένα αριστερό περιθώριο των 20px. Στο στοιχείο <p> με την κλάση ex1, ορίζουμε το αριστερό περιθώριο ως inherit, που σημαίνει ότι θα κληρονομήσει την ίδια τιμή με το γονικό στοιχείο, δηλαδή 20px.
Μερικές φορές, δύο περιθώρια συνδυάζονται σε ένα μόνο περιθώριο.
Συμπτύξη Περιθωρίων
Τα περιθώρια στο πάνω και κάτω μέρος των στοιχείων μερικές φορές συμπτύσσονται σε ένα μόνο περιθώριο που είναι ίσο με το μεγαλύτερο από τα δύο περιθώρια.
Αυτό δεν συμβαίνει στα αριστερά και δεξιά περιθώρια! Μόνο στα πάνω και κάτω περιθώρια!
Αυτή η συμπεριφορά είναι μια από τις ειδικές κανόνες για τα περιθώρια στο CSS, και αξίζει να την γνωρίζετε κατά τον σχεδιασμό της ιστοσελίδας σας.
Ας υποθέσουμε ότι έχουμε δύο στοιχεία <div> με κάθετα περιθώρια:
<div class="box"></div> <div class="box"></div>
Και τον ακόλουθο CSS κώδικα:
.box {
margin-top: 20px;
margin-bottom: 30px;
background-color: gray;
height: 100px;
}
Στο παραπάνω παράδειγμα, έχουμε ορίσει ένα περιθώριο 20px για το πάνω μέρος και 30px για το κάτω μέρος των στοιχείων <div>.
Ωστόσο, λόγω της συμπτύξεως περιθωρίων, τα δύο περιθώρια συνδυάζονται σε ένα μόνο περιθώριο, το οποίο είναι ίσο με το μεγαλύτερο από τα δύο, δηλαδή 30px. Αυτό σημαίνει ότι το περιθώριο ανάμεσα στα δύο στοιχεία είναι 30px, αντί για τα αρχικά 20px και 30px που ορίσαμε.
Μπορείτε να δοκιμάσετε το παραπάνω παράδειγμα και να δείτε πώς τα περιθώρια συμπτύσσονται σε ένα μόνο περιθώριο με βάση το μεγαλύτερο περιθώριο που ορίσαμε.