CSS margin-block egenskap

Föregående sida margin
Nästa sida margin-block-end

Definition och användning

margin-block Attributet specificerar marginalen på början och slutet av blockriktningen, och är en förkortning av följande attribut:

margin-block-start
margin-block-end

margin-block Värdet för attributet kan ställas in på olika sätt:

Om margin-block-attributet har två värden:

margin-block: 10px 50px;

Marginalmarginalen till den inre kanten är 10px
Slutmarginalen är 50px

Om margin-block-attributet har ett värde:

margin-block: 10px;

Begynnande och slutande marginaler är båda 10px

CSS margin-block och margin-inline Attribut påverkar CSS margin-top,margin-bottom,margin-left och margin-right Attribut är mycket lika, men margin-block och margin-inline Attributet är beroende av blockriktning och radriktning.

Observera:relaterade CSS-attribut writing-mode Definierar blockriktningen. Detta påverkar blockets början och slut samt margin-block Attributets resultat. För engelska sidor är blockriktningen nedåt och radriktningen från vänster till höger.

Exempel

Exempel 1

Ställ in marginaler på båda sidor av blockriktningen:

div {
  margin-block: 35px;
}

Prova själv

Exempel 2

När <div>-elementets writing-mode När attributvärdet sätts till vertical-rl, flyttas elementets början från toppen till höger och slutet från botten till vänster i blockriktningen. Förändringar i writing-mode påverkar också effekten av margin-block:

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

Prova själv

CSS-syntax

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

Attributvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standard margin-block-värde.
length	Specificera margin-block i enheter som px, pt, cm osv. Tillåter negativa värden. Se vidare:CSS units.
%	Specificera margin-block i procent av storleken på föräldrelementet i radriktningen.
initial	Sätt detta attribut till dess standardvärde. Se vidare: initial.
inherit	Följande är att arbeta med egenskapen från dess föräldrelement. Se vidare: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvbarhet:	Nej
Animation tillverkning:	Stöd. Se vidare:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.marginBlock="50px 20px"