CSS margin-block eigenschap

Vorige pagina margin
Volgende pagina margin-block-end

Definitie en gebruik

margin-block De eigenschap specificeert de buitenmarge aan het start- en eindpunt van de blokkenrichting en is een afkorting van de volgende eigenschappen:

margin-block-start
margin-block-end

margin-block De waarde van de eigenschap kan op verschillende manieren worden ingesteld:

Als de margin-block-eigenschap twee waarden heeft:

margin-block: 10px 50px;

De buitenmarge van het startpunt is 10px
De marge aan de eindrand is 50px

Als de eigenschap margin-block een waarde heeft:

margin-block: 10px;

De marges aan de start- en eindrand zijn beide 10px

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

Voorbeeld

Voorbeeld 1

Stel de marges aan beide kanten van de blokrichting in:

div {
  margin-block: 35px;
}

Probeer het zelf

Voorbeeld 2

wanneer de <div>-element writing-mode Wanneer de eigenschap vertical-rl is ingesteld, verandert de startpositie van het element in de blokrichting van boven naar rechts, en de eindpositie van het element van onder naar links. De verandering van writing-mode beïnvloedt ook het effect van margin-block:

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

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De standaard margin-block waarde van het element.
length	Specificeer margin-block in eenheid van px, pt, cm, etc. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Units.
%	Specificeer de percentage van de grootte van de ouder in de rijrichting voor margin-block.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overneemt van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritantie:	Nee
Animatieproductie:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.marginBlock="50px 20px"