CSS margin ιδιότητα

Ορισμός και χρήση

Η συντομευμένη ιδιότητα margin ρυθμίζει όλες τις ιδιότητες των περιθωρίων σε μια δήλωση. Η ιδιότητα μπορεί να έχει από 1 έως 4 τιμές.

Επεξήγηση

Αυτή η συντομευμένη ιδιότητα καθορίζει το πλάτος όλων των περιθωρίων ενός στοιχείου ή το πλάτος των περιθωρίων κάθε πλευράς.

Τα οριζόντια περιθώρια των κλασικών στοιχείων θα συγχωνεύονται, ενώ τα στοιχεία γραμμής δεν καταλαμβάνουν πραγματικά περιθώρια επάνω και κάτω. Τα περιθώρια των στοιχείων γραμμής δεν συγχωνεύονται. Επίσης, τα περιθώρια των στοιχείων που αναφέρονται στο πlov είναι επίσης συγχωνευμένα. Επιτρέπεται η καθορισμός αρνητικών τιμών για τα περιθώρια, αλλά η χρήση τους πρέπει να γίνεται με προσοχή.

Σημείωση:Επιτρέπεται η χρήση αρνητικών τιμών.

Παράδειγμα 1

margin:10px 5px 15px 20px;
  • Το επάνω περιθώριο είναι 10px
  • Το δεξί περιθώριο είναι 5px
  • Το κάτω περιθώριο είναι 15px
  • Το αριστερό περιθώριο είναι 20px

Παράδειγμα 2

margin:10px 5px 15px;
  • Το επάνω περιθώριο είναι 10px
  • Το δεξί περιθώριο και το αριστερό περιθώριο είναι 5px
  • Το κάτω περιθώριο είναι 15px

Παράδειγμα 3

margin:10px 5px;
  • Το επάνω περιθώριο και το κάτω περιθώριο είναι 10px
  • Το δεξί περιθώριο και το αριστερό περιθώριο είναι 5px

Παράδειγμα 4

margin:10px;
  • Όλα τα 4 περιθώρια είναι 10px

Δείτε επίσης:

Εκμάθηση CSS:CSS περιθώρια

Εγχειρίδιο HTML DOM:Ιδιότητα margin

Παράδειγμα

Ρυθμίστε τα 4 περιθώρια του στοιχείου p:

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Προσπαθήστε το μόνοι σας

Γλώσσα γραφής CSS

margin: length|auto|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
auto Το πρόγραμμα περιήγησης υπολογίζει τα περιθώρια.
length Καθορίζει την τιμή του περιθωρίου με συγκεκριμένες μονάδες, όπως pixels, centimeters κ.λπ. Η προεπιλεγμένη τιμή είναι 0px.
% Καθορίζει τα περιθώρια ως ποσοστό του πλάτους του περιέχοντος στοιχείου.
inherit Καθορίζει ότι τα περιθώρια πρέπει να κληρονομηθούν από το γονικό στοιχείο.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: 0
Εγκατάληψη: όχι
Έκδοση: CSS1
Γλώσσα γραφής JavaScript: object.style.margin="10px 5px"

Περισσότερες παραδείξεις

Όλες οι ιδιότητες των περιθωρίων σε μια δήλωση
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε όλες τις ιδιότητες των περιθωρίων σε μια μόνο δήλωση.

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμητικά στοιχεία στην τаблицή αναφέρουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5