Ιδιότητα margin

Η ιδιότητα margin ορίζει το εξωτερικό περιθώριο ενός στοιχείου. Ως τιμή της ιδιότητας μπορούν να χρησιμοποιηθούν οποιεσδήποτε μονάδες μεγέθους ή η λέξη-κλειδί auto, που επιτρέπει στο πρόγραμμα περιήγησης να υπολογίζει αυτόματα το περιθώριο του στοιχείου. Από προεπιλογή, κάθε πρόγραμμα περιήγησης μπορεί να προσθέτει διαφορετικά περιθώρια στα στοιχεία.

Η ιδιότητα είναι μια συντομογραφία για τις ιδιότητες margin-top, margin-right, margin-bottom, margin-left.

Σύνταξη

επιλογέας {
	margin: τιμή;
}

Αριθμός τιμών

Η ιδιότητα margin δέχεται 1, 2, 3 ή 4 τιμές, που αναγράφονται χωρισμένες με κενό:

Αριθμός	Περιγραφή
`1`	Μία τιμή ορίζει περιθώριο και από τις τέσσερις πλευρές του στοιχείου.
`2`	Η πρώτη τιμή ορίζει περιθώριο από πάνω και από κάτω, ενώ η δεύτερη - από δεξιά και από αριστερά.
`3`	Η πρώτη τιμή ορίζει περιθώριο από πάνω, η δεύτερη - από δεξιά και από αριστερά, και η τρίτη - από κάτω.
`4`	Η πρώτη τιμή ορίζει περιθώριο από πάνω, η δεύτερη - από δεξιά, η τρίτη - από κάτω, και η τέταρτη - από αριστερά.

Παράδειγμα

Τώρα θα έχουμε ένα μπλοκ χωρίς περιθώρια:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Παράδειγμα

Τώρα θα ορίσουμε στο μπλοκ περιθώριο 10px:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Παράδειγμα

Ας ορίσουμε στο μπλοκ περιθώριο 10px από πάνω και από κάτω και 20px - από αριστερά και από δεξιά:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Παράδειγμα

Ας ορίσουμε στο μπλοκ περιθώριο 5px από πάνω, 15px από δεξιά, 25px από κάτω και 35px από αριστερά:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Δείτε επίσης

η ιδιότητα padding,
που ορίζει εσωτερικό περιθώριο