CSS margin-inline ιδιότητα

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

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

margin-inline Οι τιμές της ιδιότητας μπορούν να οριστούν με διάφορους τρόπους:

Εάν η ιδιότητα margin-inline έχει δύο τιμές:

margin-inline: 10px 50px;
  • Η εξωτερική εμβόλιμη απόσταση στο ξεκίνημα είναι 10px
  • Η εξωτερική εμβόλιμη απόσταση στο τέλος είναι 50px

Εάν η ιδιότητα margin-inline έχει μια τιμή:

margin-inline: 10px;
  • margin-inline: 10px;

από την αρχή και το τέλος του εξωτερικού γειτνίασματος είναι 10px margin-inline και margin-block ιδιότητες είναι παρόμοιες με το CSS margin-top、margin-bottom、margin-left και margin-right ιδιότητες είναι πολύ παρόμοιες, αλλά margin-inline και margin-block Η ιδιότητα εξαρτάται από την κατεύθυνση του блока και της γραμμής.

Λέξη προειδοποίησης:σχετικές ιδιότητες CSS writing-mode και direction Ορίζει τη κατεύθυνση γραμμής. Αυτό επηρεάζει τη θέση του στοιχείου και το αποτέλεσμα του attributes margin-inline-end. Για τις σελίδες αγγλικών, η κατεύθυνση του блока είναι προς τα κάτω και η κατεύθυνση γραμμής είναι από αριστερά προς δεξιά.

Παράδειγμα

Παράδειγμα 1

Ρύθμιση των εξωτερικών γειτνίασμάτων στην κατεύθυνση γραμμής:

div {
  margin-inline: 35px;
}

Προσπάθησε το σώμα σου

Παράδειγμα 2

Όταν το attributes του στοιχείου <div> είναι writing-mode Όταν η τιμή του attributes είναι 'vertical-rl', η κατεύθυνση γραμμής είναι προς τα κάτω. Το αποτέλεσμα είναι η αρχική θέση του στοιχείου να μετακινηθεί από τη δεξιά στην κορυφή και η τελική θέση από τη δεξιά στην βάση:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Προσπάθησε το σώμα σου

Παράδειγμα 3

Όταν το attributes του στοιχείου <div> είναι direction Όταν η τιμή του attributes είναι 'rtl', η κατεύθυνση γραμμής είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι η αρχική θέση του στοιχείου να μετακινηθεί από τη δεξιά στην αριστερά και η τελική θέση από τη δεξιά στην αριστερά:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Προσπάθησε το σώμα σου

Γλώσσα CSS

margin-inline: auto|length|initial|inherit;

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

Τιμή Περιγραφή
auto Προεπιλεγμένη τιμή. Η προεπιλεγμένη τιμή του margin-inline του στοιχείου.
length

Καθορίσει το margin-inline με μονάδες όπως px, pt, cm. Αποτελούνται από αρνητικές τιμές.

Δες:Μονάδες CSS.
% Καθορίσει το ποσοστό του μεγέθους του γονικού στοιχείου στη διάσταση γραμμής για το margin-inline.
initial Θέσε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δες: initial.
inherit Κληρονομεί αυτή την ιδιότητα από το γονικό στοιχείο. Δες: inherit.

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

Προεπιλεγμένη τιμή: auto
Κληρονομικότητα: Όχι
Προσθήκη κίνησης: Υποστηρίζεται. Εξέτασε:Συνηρημένες ιδιότητες κίνησης.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.marginInline="50px 10px"

Υποστήριξη περιηγητών

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

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Σχετικές σελίδες

Αναφορά:CSS direction ιδιότητα

Αναφορά:CSS margin-inline-end ιδιότητα

Αναφορά:CSS margin-inline-start ιδιότητα

Αναφορά:CSS margin-bottom attribute

Αναφορά:CSS margin-inline ιδιότητα

Αναφορά:CSS margin-left ιδιότητα

Αναφορά:CSS margin-right ιδιότητα

Αναφορά:CSS margin-top ιδιότητα

Αναφορά:Ενότητα CSS writing-mode