Σύνδεση
Μενού

Κεφάλαιο 7: CSS Margins

Όπως πολύ πιθανών να έχετε μαντέψει, οι ιδιότητες margin προσδιορίζουν το περιθώριο γύρο από τα στοιχεία της HTML.

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

margin-top: value;
margin-left: value;
margin-bottom: value;
margin-right: value;

και οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες

auto
μια ποσοστιαίο τιμή
μια τιμή με μια μονάδα μέτρησης

Μπορείτε επίσης να ορίσετε όλες τις τιμές margin σε μία ιδιότητα όπως στο παράδειγμα που ακολουθεί:

margin : value_1 value_2 value_3 value_4;

Σε αυτή την περίπτωση η τιμή value_1 αντιστοιχεί στο margin-top, η value_2 στο margin-right, η value_3 στο margin-bottom και η value_4 στην ιδιότητα margin-left.

Μπορείτε επίσης να ορίσετε μια μόνο τιμή με την ιδιότητα margin όπως στο παράδειγμα που ακολουθεί :

margin: value;

Σε αυτή την περίπτωση η τιμή που θα δηλώσετε στην ιδιότητα margin θα οριστεί αυτόματα και για όλες τις ιδιότητες margin.

Επίσης μπορείτε αν θέλετε να ορίσετε μόνο δύο ή μόνο τρις τιμές στην ιδιότητα margin όπως συμβαίνει στο παράδειγμα που ακολουθεί:

margin: value_1 value_2;
margin: value_1 value_2 value_3;

Στην περίπτωση των δυο τιμών η πρώτη τιμή ορίζει τις τιμές των ιδιοτήτων margin-top και margin-bottom ενώ η δεύτερη τιμή ορίζει τις τιμές των ιδιοτήτων margin-left και margin-right.

Στην περίπτωση των τριών τιμών η πρώτη τιμή ορίζει την τιμή της ιδιότητας margin-top, η δεύτερη τιμή ορίζει τις τιμές των ιδιοτήτων margin-left και margin-right ενώ η τρίτη τιμή ορίζει την τιμή της ιδιότητας margin-bottom.

Θα πρέπει να σημειωθεί πως οι ιδιότητες margin μπορούν να δεχτούν και αρνητικές τιμές. Τέλος η εξ ορισμού τιμή για τις ιδιότητες margin είναι μηδέν.

Προηγούμενο : CSS Span Elements
Επόμενο :  CSS Padding