Margin-inline-end - CSS-Tricks

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

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

Końcowa krawędź w kierunku liniowego jest przez elementu writing-mode, directioni text-orientation. Tak więc, gdy używasz margin-inline-endw poziomym kontekście od lewej do prawej, zachowuje się tak, jakby margin-rightkońcowa krawędź elementu znajdowała się po prawej stronie.

Ale jeśli zmienimy na writing-mode, powiedzmy, pionowy, element jest obracany zgodnie z ruchem wskazówek zegara, umieszczając końcową krawędź w dół. W rezultacie margin-inline-endzachowuje się tak samo margin-bottom. 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-inline-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-start akceptuje pojedynczą długość lub wartość słowa kluczowego.

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