Własność CSS margin-block-end

Własność CSS margin-block-end ustawia szerokość logicznego marginesu końcowego w orientacji blokowej. Jest to własność niedziedziczona.

Ustawienie własności margin-block-end zostaje odwzorowane na odpowiednią własność fizyczną marginesu 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.) własność ta odpowiada własności margin-bottom, np.:

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

W tym przykładzie końcowy logiczny margines blokowy będzie miał szerokość 20 pikseli (tekst jest pisany od góry o orientacji poziomej – jak w języku polskim). Efekt tego jest taki:

Margines został zastosowany na dole, bo tam znajduje się logiczny początek elementu. W tym przypadku logiczna własność margin-block-end odpowiada fizycznej własności margin-bottom.

Gdybyśmy tę samą deklarację własności margin-block-end zastosowali do tekstu pionowego, pisanego od prawej do lewej, to odpowiadałaby ona fizycznej własności margin-left.

div {
  margin-block-end: 20px;
  background-color: lightpink;
  height: 100px;
  writing-mode: vertical-rl;
}
...
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>...</div>

Efekt:

Obsługiwane wartości

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

• 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.

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

Składnia

Własność margin-block-end przyjmuje jedną wartość określającą szerokość końcowego logicznego marginesu blokowego:

margin-block-end: 10px;

W powyższym przykładzie margines końcowy będzie miał szerokość 10 pikseli.

Zastosowanie

Własność margin-block-end 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-end działa także w pseudoelementach ::first-letter i ::first-line.

Podsumowanie