CSS inset-block-end eigenschap

Definitie en gebruik

inset-block-end Eigenschap instellen om de afstand tussen het einde van het element en het ouder element op de blokkenrichting te bepalen.

Opmerking:Om deze eigenschap effectief te maken, moet je de 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 blokkenrichting en de lijnrichting.

Opmerking:gerelateerde CSS-eigenschappen writing-mode Definieert de blokkenrichting. Dit beïnvloedt de start- en eindposities van de blokken, evenals inset-block-end Het resultaat van de eigenschap. Voor Engelse pagina's is de blokkenrichting naar beneden en de lijnrichting van links naar rechts.

Voorbeeld

Voorbeeld 1

Stel de afstand tussen de onderkant van een geplaatste <div>-element en het ouder element in op de blokkenrichting:

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

Probeer het zelf uit

Voorbeeld 2

Wanneer de <div>-elementen writing-mode Als de eigenschap vertical-rl is ingesteld, is de blokkenrichting van rechts naar links. Het resultaat is dat de uiteinden van het element van onder naar links verhuizen:

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

Probeer het zelf uit

CSS syntax

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

Eigenschapswaarde

Technische details

Browserondersteuning

Tafelcijfers vertegenwoordigen de browserversies die de eigenschap volledig ondersteunen.

Gerelateerde pagina's

Tutorial:CSS-positionering

Referentie:CSS position eigenschap

Referentie:CSS writing-mode eigenschap