Η ιδιότητα margin ορίζει μια κενή περιοχή γύρω από ένα στοιχείο της σελίδας, έξω από το πλαίσιο του (border). Δείτε παρακάτω την εικόνα του Box model, στην οποία απεικονίζονται οι περιοχές margin, border και padding ενός στοιχείου:

box model
Χρησιμοποιούμε την ιδιότητα αυτή για να ορίσουμε το κενό διάστημα μεταξύ ενός στοιχείου και των γειτονικών του. Η κενή περιοχή που ορίζει η ιδιότητα margin δεν μπορεί να πάρει χρώμα, είναι πάντα transparent.

Οι τιμές που μπορεί να πάρει η ιδιότητα marginείναι:
  • auto (η τιμή καθορίζεται από τον browser)
  • αριθμός σε pixels
  • αριθμός σε cm
  • αριθμός σε %

Τρόποι σύνταξης

Μπορούμε να ορίσουμε διαφορετικές τιμές για τις 4 πλευρές του στοιχείου με τις ιδιότητες: margin-top, margin-right, margin-bottom και margin-left.

Ορισμός διαφορετικού margin για τις τέσσερεις πλευρές του στοιχείου
.paragraph {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 2%;
margin-left: 40px;
}
Η παράγραφος του παραπάνω παραδείγματος εμφανίζει μια παράγραφο με πάνω κενό 10px, δεξιο κενό 30px, κάτω κενό 2% και αριστερό κενό 40px

Ένας άλλος τρόπος, πιο σύντομος, είναι η χρήση της ιδιότητας margin η οποία μπορεί να πάρει από μια έως τέσσερεις τιμές που αντιστοιχούν στις 4 πλευρές του στοιχείου. Παρακάτω θα δούμε με παραδείγματα τους τρόπους σύνταξης της ιδιότητας margin.

Η ιδιότητα margin με μια τιμή
.pinakas_apotelesmatwn {
margin: 15px;
}
Στο στυλ ορίζουμε κενή περιοχή μεγέθους 15px και από τις 4 πλευρές του στοιχείου

Η ιδιότητα margin με δύο τιμές
.top_menu {
margin: 15px 10px;
}
Στο στυλ αυτό ορίζουμε κενή περιοχή μεγέθους 15px από την πάνω και κάτω πλευρά και 10px από την δεξιά και αριστερή πλευρά

Η ιδιότητα margin με τρεις τιμές
#copyright {
margin: 15px 10px 5%;
}
Σε αυτό το στυλ ορίζουμε κενή περιοχή μεγέθους 15px από την πάνω, 10px την δεξιά και την αριστερή πλευρά και 5% από την κάτω

Η ιδιότητα margin με τέσσερεις τιμές
#right {
margin: 15px 10px 5% 40px;
}
Σε αυτό το στυλ ορίζουμε κενή περιοχή μεγέθους 15px από την πάνω, 10px από την δεξιά, 5% από την κάτω και 40% από την αριστερή πλευρά

Στο παρακάτω παράδειγμα τα δύο στυλ έχουν ακριβώς το ίδιο αποτέλεσμα, αν και είναι γραμμένα με δύο διαφορετικούς τρόπους:

Σύγκριση των δύο τρόπων ορισμού του margin
.tropos1 {
margin-top: 10px;
margin-right: 0;
margin-bottom: 2%;
margin-left: 40px;
}

.tropos2 {
margin: 10px 0 2% 40px;
}

Ιδιότητες της CSS για το περιθώριο (margin) των στοιχείων

Οι ιδιότητες της CSS για τον ορισμό περιθωρίου (margin), μας επιτρέπουν να ορίσουμε τον κενό χώρο σε όλες τις πλευρές του, ή σε κάποιες απο αυτές

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού του περιθωρίου ενός στοιχείου της σελίδας:
ΙδιότηταΤιμέςΠεριγραφή
margin margin-top
margin-right
margin-bottom
margin-left
Η ιδιότητα αυτή είναι συντομογραφία των τεσσάρων ιδιοτήτων ορισμού περιθωρίου για τις τέσσερεις πλευρές ενός στοιχείου: margin-top, margin-right, margin-bottom και margin-left
Δοκίμασε το
margin-bottom auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο μεταξύ της κάτω πλευράς του στοιχείου και ότι βρίσκετε κάτω από αυτό το στοιχείο
Δοκίμασε το
margin-left auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο μεταξύ της αριστερής πλευράς του στοιχείου και ότι βρίσκετε αριστερά από αυτό το στοιχείο
Δοκίμασε το
margin-right auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο μεταξύ της δεξιάς πλευράς του στοιχείου και ότι βρίσκετε δεξιά από αυτό το στοιχείο
Δοκίμασε το
margin-top auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο μεταξύ της πάνω πλευράς του στοιχείου και ότι βρίσκετε πάνω από αυτό το στοιχείο
Δοκίμασε το

Παραδείγματα

Ορισμός περιθωρίου για κάθε πλευρά του στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε διαφορετικού μήκους περιθώρια για κάθε πλευρά του στοιχείου (ιδιότητα margin)

Ορισμός περιθωρίου για την κάτω πλευρά του στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το περιθώρια για την κάτω πλευρά του στοιχείου (ιδιότητα margin-bottom)

Ορισμός περιθωρίου για την αριστερή πλευρά του στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το περιθώρια για την αριστερή πλευρά του στοιχείου (ιδιότητα margin-left)

Ορισμός περιθωρίου για την δεξιά πλευρά του στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το περιθώρια για την δεξιά πλευρά του στοιχείου (ιδιότητα margin-right)

Ορισμός περιθωρίου για την πάνω πλευρά του στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το περιθώρια για την πάνω πλευρά του στοιχείου (ιδιότητα margin-top)
Pin It