Margin-inline - CSS-Κόλπα

margin-inlineείναι μια στενή ιδιότητα στο CSS που ορίζει ένα στοιχείο margin-inline-startκαι margin-inline-endτιμές, και οι δύο είναι λογικές ιδιότητες. Δημιουργεί χώρο γύρω από το στοιχείο προς την κατεύθυνση inline, η οποία καθορίζεται από το στοιχείο του writing-mode, directionκαι text-orientation.

Η ιδιότητα είναι μέρος των προδιαγραφών CSS Logical Properties και Value Level 1 που βρίσκεται επί του παρόντος στην κατάσταση πρόχειρου του Editor. Αυτό σημαίνει ότι ο ορισμός και οι πληροφορίες σχετικά με αυτό μπορούν να αλλάξουν από τώρα έως την επίσημη σύσταση.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Εάν η writing-modeρύθμιση έχει οριστεί σε horizontal-lr, η margin-inlineιδιότητα θα ενεργεί ακριβώς όπως η ρύθμιση margin-leftκαι margin-right. Μια ενδιαφέρουσα πτυχή αυτής της ιδιότητας είναι ότι είναι μια από τις λογικές ιδιότητες που δεν έχει έναν προς έναν χάρτη με μια μη λογική ιδιότητα. Δεν υπάρχει παλαιότερη ιδιότητα που να καθορίζει και τα δύο (και μόνο) τα περιθώρια ευθυγράμμισης.

Αλλά αλλάξτε το στοιχείο writing-modeσε κάτι σαν vertical-lrκαι οι "ενσωματωμένες" άκρες περιστρέφονται στην κατακόρυφη κατεύθυνση, ενεργώντας περισσότερο σαν margin-topκαι τις margin-bottomιδιότητες.

Σύνταξη

margin-inline: (1,2)

Είναι περίεργο να βλέπουμε τη σύνταξη μιας ιδιότητας να αναφέρει τη σύνταξη μιας άλλης ιδιότητας CSS στην τεκμηρίωση, αλλά αυτό είναι πραγματικά αυτό που είναι. Αυτό που βασικά προσπαθεί να πει είναι ότι η ιδιοκτησία δέχεται τις ίδιες τιμές με margin-top(έως και δύο φορές) που ακολουθεί αυτήν τη σύνταξη:

margin-top: | | auto;

Αρχική τιμή: 0
Ισχύει για: όλα τα στοιχεία εκτός από τα στοιχεία εσωτερικού πίνακα, τα δοχεία βάσης ρουμπίνι και τα δοχεία σχολιασμού ρουμπίνι
Κληρονομική: όχι
Ποσοστά: για την αντίστοιχη φυσική ιδιότητα
Υπολογισμένη τιμή: ίδια με τις αντίστοιχες margin-*ιδιότητες
Τύπος κινούμενης εικόνας: ανά τύπο υπολογισμένης τιμής

Αξίες

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

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;