CSS margin-block-end eigenschap

Vorige pagina margin-block
Volgende pagina margin-block-start

Definitie en gebruik

margin-block-end definieert de buitenrand aan het einde van de blokrichting.

CSS-eigenschappen margin-block en margin-inline eigenschappen zijn vergelijkbaar met de CSS- margin-top,margin-bottom,margin-left en margin-right zijn zeer vergelijkbaar, maar margin-block en margin-inline De eigenschap is afhankelijk van de blokrichting en de rijrichting.

Opmerking:gerelateerde CSS-eigenschappen writing-mode Definieert de blokrichting. Dit beïnvloedt de start- en eindpositie van de blokken en margin-block-end Het resultaat van de eigenschap. Voor Engelse pagina's is de blokrichting naar beneden, de rijrichting van links naar rechts.

Voorbeeld

Voorbeeld 1

Stel de buitenrand in bij het einde van de blokrichting:

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

Probeer het zelf

Voorbeeld 2

Wanneer de <div>-element writing-mode Wanneer de waarde van de eigenschap vertical-rl is ingesteld, is de blokrichting van rechts naar links. Het resultaat is dat de eindepositie van het element van onder naar links verhuist. Daarom beïnvloedt de verandering van writing-mode ook het effect van margin-block-end:

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

Probeer het zelf

CSS Syntax

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De standaard buitenrand van het element.
length	Specificeer de afstand, met een eenheid zoals px, pt, cm, etc. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Eenheid.
%	Specificeer de afstand als percentage van de grootte van het ouder element in de rijrichting.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overnemen van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inherits:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript Syntax:	object.style.marginBlockEnd="20px"