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

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

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

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

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

Σύνταξη

margin-block-end:

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

margin-top: | | auto;

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

Αξίες

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

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