Własność CSS margin-block

Własność CSS margin-block to własność zbiorcza CSS służąca do ustawiania szerokości początkowego i końcowego marginesu logicznego w orientacji blokowej. Jest to własność niedziedziczona. Obejmuje ona dwie indywidualne własności logicznego marginesu blokowego:

• margin-block-start
• margin-block-end

Ustawienia własności margin-block są odwzorowywane na odpowiednie własności fizyczne marginesów zależnie od kierunku i orientacji pisma. W przypadku dokumentów w językach pisanych od lewej strony i od góry (takich jak polski, angielski itd.) wartości tej własności odpowiadają ustawieniom margin-top i margin-bottom, np.:

div {
  background-color: lightpink;
}
p {
  margin-block: 20px;
  writing-mode: horizontal-tb;
  background: coral;
}
...
<div>...</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>...</div>

W tym przykładzie zdefiniowaliśmy logiczne marginesy blokowe z obu stron na 20 pikseli oraz ustawiliśmy kierunek pisma poziomego od góry do dołu (jak w języku polskim). Efekt tego jest taki:

Jak widać marginesy zostały zastosowane na górze (margin-top, logiczny początek elementu) i na dole (margin-bottom, logiczny koniec elementu).

Gdybyśmy tę samą deklarację własności margin-block zastosowali do tekstu pionowego, to marginesy zostałyby zastosowane po lewej i prawej stronie, czyli własność margin-block odpowiadałaby własnościom fizycznym margin-left i margin-right.

Obsługiwane wartości

Typy wartości przyjmowane przez własność margin-block:

• Liczby z jednostką długości
• Procenty – wartości procentowe odnoszą się do szerokości (w przypadku dokumentów zawierających tekst w języku pisanym od lewej do prawej strony) nadrzędnego elementu blokowego, czyli zawierającego ten element, dla którego jest zdefiniowany margines.
• auto – szerokość marginesu jest dobierana przez przeglądarkę. Tej wartości czasami używa się do centrowania elementów na stronie.

W jednej deklaracji własności margin-block można mieszać różne typy wartości, a więc poniższa deklaracja, choć niezbyt rozsądna, jest prawidłowa:

margin-block: 10px 4mm;

Wartość początkowa własności margin-block to 0.

Składnia

Własność margin-block przyjmuje jedną lub dwie wartości. Jeśli jest jedna wartość, to zostaje ona zastosowana dla obu własności składowych. Jeśli wartości są dwie, to odnoszą się one odpowiednio do własności margin-block-start i margin-block-end, np.:

margin-block: 10px;

W powyższym przykładzie logiczne marginesy początkowe i końcowe będą miały szerokość po 10 pikseli. Natomiast w poniższym przykładzie margines początkowy będzie miał 10 pikseli szerokości, a końcowy – 20.

margin-block: 10px 20px;

Ten zapis jest równoważny z poniższym:

margin-block-start: 10px;
margin-block-end: 20px;

Zastosowanie

Własność margin-block ma zastosowanie do wszystkich elementów z wyjątkiem elementów tabeli, które mają własność display ustawioną na inną wartość niż table-caption, table oraz inline-table.

Dodatkowo własność margin-block działa także w pseudoelementach ::first-letter i ::first-line.

Podsumowanie