Margin-block-end - CSS-Tricks | Almanach CSS 2025

margin-block-endWłaściwość CSS określa ilość miejsca wzdłuż zewnętrznego brzegu końcowego elementu w kierunku bloku. Jest uwzględniony w specyfikacji CSS Logical Properties Level 1, która jest obecnie w wersji roboczej.

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

Końcowa krawędź w kierunku bloku zależy od tego elementu writing-mode, directioni text-orientation. Tak więc, gdy używasz margin-block-endw poziomym kontekście od lewej do prawej, zachowuje się tak, jakby margin-bottompoczątkowa krawędź elementu była jego dolną częścią.

Ale jeśli zmienimy na writing-mode, powiedzmy, pionowy, element jest obracany, umieszczając końcową krawędź w prawo. W rezultacie margin-block-endzachowuje się tak samo margin-right. 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-end:

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-end akceptuje pojedynczą długość lub wartość słowa kluczowego.

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