Ιδιότητα margin

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

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

Σύνταξη

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

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

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

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης