Blok-marginesu - CSS-Tricks | Almanach CSS 2025

margin-blockto skrócona właściwość w CSS, która ustawia element margin-block-starti margin-block-endwartości, z których oba są właściwościami logicznymi. Tworzy przestrzeń wokół elementu w kierunku inline, która jest określana przez elementu writing-mode, directionoraz text-orientation.

Właściwość jest częścią specyfikacji CSS Logical Properties and Values Level 1, która obecnie znajduje się w statusie Editor's Draft. Oznacza to, że definicja i informacje na jego temat mogą ulec zmianie od chwili obecnej do oficjalnych zaleceń.

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

Jeśli writing-modejest ustawiona na horizontal-lr, margin-blockwłaściwość będzie działać tak samo, jak ustawienie margin-topi margin-bottom. Interesującym aspektem tej właściwości jest to, że jest to jedna z właściwości logicznych, która nie ma mapy jeden do jednego z właściwością nielogiczną. Nie ma starszej właściwości, która ustawia zarówno (i tylko) marginesy kierunku bloku.

Ale zmień element na writing-modecoś podobnego, vertical-lra „dolna” krawędź jest obracana w kierunku pionowym, zachowując się bardziej jak właściwości margin-lefti margin-right.

Składnia

margin-block: (1,2)

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 co margin-top(do dwóch razy), co jest 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

Jeśli znasz marginskrótową właściwość, margin-blockpoczujesz się bardzo znajomo. Jedyna różnica polega na tym, że działa w dwóch kierunkach zamiast czterech.

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