CSS inset-inline-end eigenschap

Vorige pagina inset-inline
Volgende pagina inset-inline-start

Definitie en gebruik

inset-inline-end Eigenschap instellen om de afstand tussen het einde van het element in de richting van de lijn en het ouderweergave element te bepalen.

Opmerking:Om deze eigenschap te laten werken, moet je position Eigenschappen.

CSS- inset-inline en inset-block Eigenschappen zijn vergelijkbaar met de CSS- top,bottom,left en right Eigenschappen zijn zeer vergelijkbaar, maar inset-block en inset-inline De eigenschap is afhankelijk van de richting van de blokken en de richting van de lijn.

Opmerking:gerelateerde CSS-eigenschappen writing-mode en direction Definieert de richting van de lijn. Dit beïnvloedt de positie van het einde van het element in de richting van de lijn en inset-inline-end Het resultaat van de eigenschap. Voor Engelse pagina's is de richting van de lijn van links naar rechts, en de richting van de blokken is naar beneden.

Voorbeeld

Voorbeeld 1

Stel de afstand tussen het einde van het geplaatste <div>-element in de richting van de lijn en het ouderweergave element in:

div {
  inset-inline-end: 50px;
}

Probeer het zelf

Voorbeeld 2

Wanneer de waarde van de eigenschap van het <div>-element writing-mode Wanneer de waarde van de eigenschap vertical-rl is ingesteld, is de richting van de lijn naar beneden. Het resultaat is dat de uiteinden van het element van de rechterkant naar de onderkant verhuizen:

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

Probeer het zelf

Voorbeeld 3

Wanneer de waarde van de eigenschap van het <div>-element direction Wanneer de waarde van de eigenschap rtl is ingesteld, is de richting van de lijn van rechts naar links. Het resultaat is dat de uiteinden van het element van de rechterkant naar de linkerkant verhuizen:

div {
  inset-inline-end: 50px;
  direction: rtl;
}

Probeer het zelf

CSS syntaxis

inset-inline-end: auto|length|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De standaard ingesloten afstand van het element.
length	Specificeer een afstand in eenheid zoals px, pt, cm. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Units.
%	Specificeer een percentage afstand ten opzichte van de grootte van het ouderweergave element op de betreffende as.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap van de ouderweergave element overnemen. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritantie:	Nee
Animatieproductie:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.insetInlineEnd="30%"