Margin-block-start - CSS-Tricks

margin-block-startWłaściwość CSS określa ilość miejsca wzdłuż zewnętrznej krawędzi początkowego elementu w kierunku bloku. Jest uwzględniony w specyfikacji CSS Logical Properties Level 1, która jest obecnie w wersji roboczej.

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

Początkowa krawędź w kierunku bloku jest określana przez element writing-mode, directioni text-orientation. Tak więc, gdy używasz margin-block-startw poziomym kontekście od lewej do prawej, zachowuje się tak, jakby margin-toppoczątkowa krawędź elementu była jego górą.

Ale jeśli zmienimy na writing-mode, powiedzmy, pionowy, element jest obracany, umieszczając krawędź początkową w lewo. W rezultacie margin-block-startzachowuje się tak samo margin-left. Zasadniczo krawędź początkowa jest ustawiona względem kierunku, w którym płynie. To właśnie mamy na myśli, mówiąc o właściwościach „logicznych”.

Składnia

margin-block-start:

To trochę dziwne, że składnia jednej właściwości odwołuje się do składni innej właściwości CSS bezpośrednio w dokumentacji, ale tak naprawdę to jest. Zasadniczo próbuje się powiedzieć, że właściwość przyjmuje te same wartości, margin-topktóre są zgodne z następującą składnią:

margin-top: | | auto;

Wartość początkowa: 0
Dotyczy: wszystkich elementów oprócz elementów tabeli wewnętrznej, kontenerów bazowych ruby i kontenerów adnotacji ruby
Odziedziczone: nie
Procenty: jak dla odpowiedniej własności fizycznej
Wartość obliczona: taka sama jak odpowiadające margin-*właściwości
Typ animacji: według obliczonego typu wartości

Wartości

margin-block-start akceptuje pojedynczą długość lub wartość słowa kluczowego.

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