Atrybut CSS margin-block

Poprzednia strona margin
Następna strona margin-block-end

Definicja i użycie

margin-block Właściwość określa marginesy zewnętrzne początkowego i końcowego krawędzi w kierunku blokowym i jest skrótem dla następujących właściwości:

margin-block-start
margin-block-end

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

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

margin-block: 10px 50px;

Margines zewnętrzne początkowego krawędzi wynoszą 10px
krawędź końcowa ma margines 50px

Jeśli atrybut margin-block ma jedną wartość:

margin-block: 10px;

Początkowe i końcowe krawędzie mają margines 10px

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

Uwaga:powiązane atrybuty CSS writing-mode Definiuje kierunek blokowy. To wpływa na początkową i końcową pozycję bloku oraz margin-block Wynik atrybutu. Dla stron w języku angielskim, kierunek blokowy jest w dół, a kierunek wiersza od lewej do prawej.

Przykład

Przykład 1

Ustaw marginesy po obu stronach w kierunku blokowym:

div {
  margin-block: 35px;
}

Spróbuj sam

Przykład 2

Kiedy element <div> writing-mode Kiedy wartość atrybutu writing-mode ustawiona jest na vertical-rl, początkowa pozycja elementu w kierunku blokowym przenosi się do prawej strony, a końcowa pozycja przenosi się do lewej strony. Zmiana writing-mode wpływa również na efekt margin-block:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
auto	Domyślna wartość. Domyślna wartość margin-block dla elementu.
length	Określ margin-block w jednostkach px, pt, cm itp. Dopuszczalne są wartości ujemne. Zobacz:Jednostki CSS.
%	Określ procentową wartość margin-block w stosunku do rozmiaru elementu nadrzędnego w kierunku wiersza.
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.marginBlock="50px 20px"