rooster

CSS Reference Manual

CSS eigenschappen

Verplichte cursussen

Aanbevolen cursussen:

CodeW3C.com hulpmiddelenkist

CSS margin-inline eigenschap

Vorige pagina margin-beneden
Volgende pagina margin-inline-end

Definitie en gebruik

margin-inline De property specificeert de buitenmarge aan het begin en einde van de rijrichting, en is een verkorte vorm van de volgende properties:

margin-inline De waarden van de property kunnen op verschillende manieren worden ingesteld:

Als de property margin-inline twee waarden heeft:

margin-inline: 10px 50px;

De buitenmarge aan het begin is 10px
De buitenmarge aan het einde is 50px

Als de waarde van de property margin-inline is ingesteld:

margin-inline: 10px;

De marges aan het begin en einde zijn beide 10px

CSS's margin-inline en margin-block Eigenschappen zijn vergelijkbaar met margin-top,margin-beneden,margin-left en margin-right Eigenschappen zijn zeer vergelijkbaar, maar margin-inline en margin-block De eigenschap is afhankelijk van de blokrichting en de lijnrichting.

Opmerking:gerelateerde CSS-eigenschappen writing-mode en direction Definieert de richting van de lijn. Dit beïnvloedt de start- en eindpositie van het element, evenals het resultaat van de eigenschap margin-inline-end. Voor Engelse pagina's is de blokrichting naar beneden en de lijnrichting van links naar rechts.

Voorbeeld

Voorbeeld 1

Stel de marges aan weerszijden van de rijrichting in:

div {
  margin-inline: 35px;
}

Probeer het zelf uit

Voorbeeld 2

Wanneer de eigenschap van het <div>-element writing-mode Wanneer de waarde van de eigenschap 'vertical-rl' is ingesteld, is de richting van de rij naar beneden. Het resultaat is dat de startpositie van het element van links naar boven verhuist en de eindpositie van rechts naar beneden verhuist:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Probeer het zelf uit

Voorbeeld 3

Wanneer de eigenschap van het <div>-element direction Wanneer de waarde van de eigenschap 'rtl' is ingesteld, is de richting van de rij van rechts naar links. Het resultaat is dat de startpositie van het element van links naar rechts verhuist en de eindpositie van rechts naar links verhuist:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Probeer het zelf uit

CSS-syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De standaardwaarde van margin-inline voor het element.
length	Specificeer margin-inline met een eenheid zoals px, pt, cm. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Units.
%	Specificeer de percentage van de grootte van de ouder in de rijrichting van de margin-inline.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritsiviteit:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript-syntaxis:	object.style.marginInline = "50px 10px"