Margin-block-start - Trucchi CSS

La margin-block-startproprietà in CSS definisce la quantità di spazio lungo il bordo iniziale esterno di un elemento nella direzione del blocco. È incluso nella specifica del livello 1 delle proprietà logiche CSS, attualmente in Working Draft.

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

Bordo iniziale nella direzione blocco è determinata dalle dell'elemento writing-mode, directione text-orientation. Quindi, quando si utilizza margin-block-startin un contesto orizzontale da sinistra a destra, si comporta come margin-topse il bordo iniziale dell'elemento fosse la parte superiore di esso.

Ma se cambiamo il writing-mode, diciamo, verticale, l'elemento viene ruotato, posizionando il bordo iniziale verso sinistra. Di conseguenza, margin-block-startsi comporta proprio come margin-left. Fondamentalmente, il bordo iniziale è relativo alla direzione in cui scorre. Questo è ciò che intendiamo quando parliamo di proprietà "logiche".

Sintassi

margin-block-start:

È un po 'strano vedere la sintassi di una proprietà fare riferimento alla sintassi di un'altra proprietà CSS proprio nella documentazione, ma è davvero quello che è. Quello che fondamentalmente sta cercando di dire è che la proprietà accetta gli stessi valori margin-topche seguono questa sintassi:

margin-top: | | auto;

Valore iniziale: 0
Si applica a: tutti gli elementi tranne gli elementi interni della tabella, i contenitori base rubino e i contenitori annotazioni rubino
Ereditato: no
Percentuali: come per la proprietà fisica corrispondente
Valore calcolato: uguale alle margin-*proprietà corrispondenti
Tipo di animazione: per tipo di valore calcolato

Valori

margin-block-start accetta una singola lunghezza o un valore di parola chiave.

/* 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;