W┼éasno┼Ť─ç CSS margin-inline-end

> Dodaj do ulubionych

W┼éasno┼Ť─ç CSS margin-inline-end ustawia szeroko┼Ť─ç ko┼äcowego marginesu logicznego w orientacji ┼Ťr├│dliniowej. Jest to w┼éasno┼Ť─ç niedziedziczona.

Ustawienie w┼éasno┼Ťci margin-inline-end jest odwzorowywane 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.) ta w┼éasno┼Ť─ç odpowiada w┼éasno┼Ťci margin-right, np.:

div {
  background-color: lightpink;
  display: inline-block;
}
p {
  margin-inline-end: 30px;
  background: coral;
}
...
<div><p>Lorem ipsum dolor sit amet.</p></div>

W tym przyk┼éadzie zdefiniowali┼Ťmy ko┼äcowy logiczny margines ┼Ťr├│dliniowy o szeroko┼Ťci 30 pikseli, dzi─Öki czemu uzyskali┼Ťmy efekt widoczny na poni┼╝szym zrzucie ekranu:

Efekt zastosowania w┼éasno┼Ťci CSS margin-inline-end

Jak wida─ç margines zosta┼é zastosowany po prawej stronie, poniewa┼╝ to jest logiczny koniec elementu w orientacji ┼Ťr├│dliniowej, i odpowiada mu w┼éasno┼Ť─ç margin-right.

A teraz t─Ö sam─ů deklaracj─Ö w┼éasno┼Ťci margin-inline-end zastosujemy do tekstu pionowego, pisanego od prawej do lewej.

div {
  background-color: lightpink;
  display: inline-block;
}
p {
  margin-inline-end: 30px;
  background: coral;
  writing-mode: vertical-rl; 
}
...
<div><p>Lorem ipsum dolor sit amet.</p></div>

Efekt:

Efekt zastosowania w┼éasno┼Ťci CSS margin-inline-end do tekstu pionowego

W tym przypadku margines r├│wnie┼╝ zosta┼é zastosowany na logicznym ko┼äcu, ale zmieni┼éa si─Ö orientacja elementu i st─ůd te┼╝ zmiana lokalizacji obszaru marginesu. Teraz w┼éasno┼Ť─ç margin-inline-end odpowiada w┼éasno┼Ťci margin-bottom.

Obs┼éugiwane warto┼Ťci

Typy warto┼Ťci przyjmowane przez w┼éasno┼Ť─ç margin-inline-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-inline-end to 0.

Składnia

W┼éasno┼Ť─ç margin-inline-end przyjmuje jedn─ů warto┼Ť─ç okre┼Ťlaj─ůc─ů szeroko┼Ť─ç ko┼äcowego logicznego marginesu ┼Ťr├│dliniowego, np.:

margin-inline-end: 10px;

W powy┼╝szym przyk┼éadzie ko┼äcowy margines ┼Ťr├│dliniowy b─Ödzie mia┼é szeroko┼Ť─ç 10 pikseli.

Zastosowanie

W┼éasno┼Ť─ç margin-inline-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-inline-end dzia┼éa tak┼╝e w pseudoelementach ::first-letter i ::first-line.

Podsumowanie

ZastosowanieWszystkie elementy z wyj─ůtkiem element├│w tabeli, kt├│re maj─ů w┼éasno┼Ť─ç display ustawion─ů na inn─ů warto┼Ť─ç ni┼╝ table-caption, table oraz inline-table
Obs┼éugiwane warto┼Ťci
Warto┼Ť─ç pocz─ůtkowa0
DziedziczenieNie
SpecyfikacjaCSS Logical Properties and Values Level 1 ÔÇô margin-inline-end