Margin-inline-end - CSS-Κόλπα

Η margin-inline-endιδιότητα στο CSS καθορίζει το μέγεθος του χώρου κατά μήκος του εξωτερικού άκρου ενός στοιχείου στην ευθύγραμμη κατεύθυνση. Περιλαμβάνεται στην προδιαγραφή CSS Logical Properties Level 1, η οποία βρίσκεται επί του παρόντος στο Πρόχειρο εργασίας.

.element ( margin-inline-end: 25%; writing-mode: vertical-lr; )

Η κατάληξη άκρη στην κατεύθυνση inline καθορίζεται από τη δεκαετία του στοιχείου writing-mode, directionκαι text-orientation. Έτσι, όταν χρησιμοποιείται margin-inline-endσε ένα οριζόντιο πλαίσιο από αριστερά προς τα δεξιά, λειτουργεί ακριβώς όπως margin-rightτο άκρο του στοιχείου είναι η δεξιά πλευρά.

Αλλά αν αλλάξουμε το writing-mode, για παράδειγμα, κατακόρυφο, το στοιχείο περιστρέφεται δεξιόστροφα, τοποθετώντας το άκρο άκρου προς τα κάτω. Ως αποτέλεσμα, margin-inline-endσυμπεριφέρεται ακριβώς όπως margin-bottom. Βασικά, το άκρο εκκίνησης σχετίζεται με την κατεύθυνση που ρέει. Αυτό εννοούμε όταν μιλάμε για «λογικές» ιδιότητες.

Σύνταξη

margin-inline-end:

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

margin-top: | | auto;

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

Αξίες

margin-block-start αποδέχεται μια τιμή μήκους ή λέξης-κλειδιού.

/* Length values */ margin-inline-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;