Περιθώριο (margin)

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

Χρησιμοποιούμε την ιδιότητα αυτή για να ορίσουμε το κενό διάστημα μεταξύ ενός στοιχείου και των γειτονικών του. Η κενή περιοχή που ορίζει η ιδιότητα 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)

Μαθήματα CSS

Περιθώριο (margin)

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

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

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