CSS margin-block-start eigenschap

Vorige pagina margin-block-end
Volgende pagina margin-bottom

Definitie en gebruik

margin-block-start Eigenschappen specificeren de margedistans bij het begin van de blokrichting.

CSS- margin-block en margin-inline Eigenschappen zijn vergelijkbaar met de CSS- margin-top,margin-bottom,margin-left en margin-right Eigenschappen 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 eindposities van de blokken en het resultaat van de eigenschap margin-block-start. Voor Engelse pagina's is de blokrichting naar beneden, de rijrichting van links naar rechts.

Voorbeeld

Voorbeeld 1

Stel de margedistans bij het begin van de blokrichting in:

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

Probeer het zelf

Voorbeeld 2

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

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

Probeer het zelf

CSS Syntax

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De standaard margedistans van het element.
length	Specificeer een afstand, gemeten in px, pt, cm, etc. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Eenheden.
%	Specificeer een percentageafstand ten opzichte van de grootte van het ouder-element in de rijrichting.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript Syntax:	object.style.marginBlockStart="100px"