Μπλοκ περιθωρίου - CSS-Κόλπα

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

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

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

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

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

Σύνταξη

margin-block: (1,2)

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

margin-top: | | auto;

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

Αξίες

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

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