CSS margin-block-end egenskap

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

Definition och användning

margin-block-end egenskapen specificerar marginalen vid slutet av blockriktningen.

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

Observera:relaterade CSS-egenskaper writing-mode Definierar blockriktningen. Detta påverkar blocks start- och slutpositioner samt margin-block-end Egenskapens resultat. För engelska sidor är blockriktningen nedåt, radriktningen är från vänster till höger.

Exempel

Exempel 1

Ställ in marginalen vid slutet av blockriktningen:

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

Prova själv

Exempel 2

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

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standardmärgning.
length	Specificera avståndet, enheterna är px, pt, cm etc. Negativa värden är tillåtna. Se till:CSS units.
%	Specificera en procentsats av storleken på raden i förhållande till föräldrelementet.
initial	Sätt detta egenskap till dess standardvärde. Se till: initial.
inherit	Följande är att arbeta med egenskapen från föräldrelementet. Se till: inherit.

Tekniska detaljer

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