CSS margin-block-start egenskap

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

Definition och användning

margin-block-start egenskapen specificerar marginalen vid början av blockriktningen.

CSS margin-block och margin-inline egenskaper är lika med CSS margin-top,margin-bottom,margin-left och margin-right egenskaper är mycket lika, men margin-block och margin-inline Egenskapen är beroende av blockriktning och riktning.

Observera:Relaterade CSS-egenskaper writing-mode Definierar blockriktningen. Detta påverkar blockets start- och slutpositioner samt resultatet av margin-block-start-egenskapen. För engelska sidor är blockriktningen nedåt, riktningen är från vänster till höger.

Exempel

Exempel 1

ställ in marginalen vid början av blockriktningen:

div {
  margin-block-start: 35px;
}

Prova själv

Exempel 2

när <div>-elementet writing-mode egenskapsvärdet sätts till vertical-rl, så är blockriktningen från höger till vänster. Resultatet är att elementets startposition flyttas till höger. Därför påverkar förändringen av writing-mode också margin-block-start effekten:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standardmarginalavstånd.
length	Ange avståndet i enheter som px, pt, cm m.m. Negativa värden är tillåtna. Se vidare:CSS units.
%	Ange en procentsats av storleken på föräldrelementet i riktningen av raden.
initial	Sätt detta värde till dess standardvärde. Se vidare initial.
inherit	Följ från föräldrelementet. Se vidare inherit.

Tekniska detaljer

Standardvärde:	auto
Arv:	Nej
Animaationsproduktion:	Stöds. Se vidare:Animationsspecifika egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.marginBlockStart="100px"