CSS właściwość margin-inline-end

Poprzednia strona margin-inline
Następna strona margin-inline-start

Definicja i użycie

margin-inline-end Definiują margines końcowy końca kierunku wewnętrznego.

atrybutów CSS margin-inline i margin-block Atrybuty są podobne do margin-top,margin-bottom,margin-left i margin-right Atrybut jest bardzo podobny, ale margin-inline i margin-block Atrybut zależy od kierunku blokowego i wewnętrznego.

Uwaga:powiązane atrybuty CSS writing-mode i direction Definiuje kierunek wewnętrzny. To wpływa na początkowe i końcowe położenie elementu oraz margin-inline-end Wynik atrybutu. Dla stron w języku angielskim, kierunek blokowy jest pionowy, a kierunek wewnętrzny jest od lewej do prawej.

Przykład

Przykład 1

Ustaw margines końcowy kierunku wewnętrznego:

div {
  margin-inline-end: 35px;
}

Spróbuj sam

Przykład 2

Kiedy wartość atrybutu <div> elementu writing-mode Kiedy wartość atrybutu 'vertical-rl' jest ustawiona, kierunek wewnętrzny jest pionowy. W rezultacie krawędź elementu przenosi się z prawej strony na dół:

div {
  margin-inline-end: 50px;
  writing-mode: vertical-rl;
}

Spróbuj sam

Przykład 3

Kiedy wartość atrybutu <div> elementu direction Kiedy wartość atrybutu 'rtl' jest ustawiona, kierunek wewnętrzny jest od prawej do lewej. W rezultacie krawędź elementu przenosi się z prawej strony na lewą:

div {
  margin-inline-end: 50px;
  direction: rtl;
}

Spróbuj sam

Gramatyka CSS

margin-inline-end: auto|length|initial|inherit;

Wartość atrybutu

Wartość	Opis
auto	Domyślna wartość. Domyślna wartość margin-inline-end dla elementu.
length	Określ margin-inline-end w jednostkach px, pt, cm itp. Dopuszczalne są wartości ujemne. Zobacz:Jednostki CSS.
%	Określ margin-inline-end jako procent wielkości elementu nadrzędnego w kierunku wewnętrznym.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	auto
Inheredność:	Nie
Tworzenie animacji:	Wspierane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.marginInlineEnd="50px"