Margin-block-start - CSS-Κόλπα

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

.element ( margin-block-start: 25%; writing-mode: vertical-lr; )

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

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

Σύνταξη

margin-block-start:

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

margin-top: | | auto;

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

Αξίες

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

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