CSS właściwość margin-inline

Poprzednia strona margin-bottom
Następna strona margin-inline-end

Definicja i użycie

margin-inline Właściwość określa zewnętrzny margines na początku i końcu w kierunku wiersza, jest skróconą wersją następujących właściwości:

margin-inline wartości właściwości można ustawić na różne sposoby:

Jeśli właściwość margin-inline ma dwie wartości:

margin-inline: 10px 50px;

zewnętrzny margines na początku wynosi 10px
zewnętrzny margines na końcu wynosi 50px

Jeśli właściwość margin-inline ma wartość:

margin-inline: 10px;

zewnętrzne marginesy na początku i końcu wynoszą 10px

CSS margin-inline i margin-block Atrybuty są podobne do margin-top,margin-bottom,margin-left i margin-right Atrybuty są bardzo podobne, ale margin-inline i margin-block Atrybut zależy od kierunku blokowego i wiersza.

Uwaga:powiązane atrybuty CSS writing-mode i direction Definiuje kierunek wiersza. To wpływa na pozycję początkową i końcową elementu oraz wynik atrybutu margin-inline-end. Dla stron w języku angielskim, kierunek blokowy jest w dół, a kierunek wiersza jest z lewej na prawo.

Przykład

Przykład 1

Ustaw marginesy po obu stronach kierunku wiersza:

div {
  margin-inline: 35px;
}

Spróbuj sam

Przykład 2

Kiedy atrybut <div> elementu writing-mode Kiedy wartość atrybutu 'vertical-rl' jest ustawiona, kierunek wiersza jest w dół. W rezultacie pozycja początkowa elementu przenosi się z lewej na górę, a pozycja końcowa z prawej na dół:

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

Spróbuj sam

Przykład 3

Kiedy atrybut <div> elementu direction Kiedy wartość atrybutu 'rtl' jest ustawiona, kierunek wiersza jest z prawej na lewo. W rezultacie pozycja początkowa elementu przenosi się z lewej na prawą, a pozycja końcowa z prawej na lewą:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
auto	Domyślna wartość. Domyślna wartość marginesu inline elementu.
length	Określ margines inline w jednostkach px, pt, cm itp. Dopuszczalne są wartości ujemne. Zobacz:Jednostki CSS.
%	Określ procentowy margines inline w stosunku do rozmiaru elementu nadrzędnego w kierunku wiersza.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dochodzi do tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	auto
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.marginInline="50px 10px"