CSS inset-block-start eigenschap

Definitie en gebruik

inset-block-start Eigenschap instellen om de afstand tussen de startkant van het element in de blokkenrichting en de ouderweergave te specificeren.

Opmerking:Om deze eigenschap effectief te maken, moet je position Eigenschappen.

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

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

Voorbeeld

Voorbeeld 1

Stel de afstand tussen de geplaatste <div>-elementen in de blokkenrichting en de ouderweergave in:

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

Probeer het zelf

Voorbeeld 2

Wanneer de <div>-elementen writing-mode Wanneer de eigenschap vertical-rl is ingesteld, is de blokkenrichting van rechts naar links. Het resultaat is dat de startkant van het element van boven naar de rechterkant verhuist:

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

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. Gebruik de standaard inset-afstand van het element.
length

Gebruik een vaste eenheid (zoals px, pt, cm, etc.) om de afstand te specificeren. Negatieve waarden zijn toegestaan.

Raadpleeg:CSS Eenheid.
% Gebruik procent om de afstand te specificeren, ten opzichte van de grootte van de ouderweergave op de overeenkomstige as.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erfgenomen van de ouderweergave. Raadpleeg inherit.

Technische details

Standaardwaarde: auto
Inheritschap: Nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.insetBlockStart="100px"

Browserondersteuning

Tafelnummers vertellen de browserversie van de eerste volledige ondersteuning van deze eigenschap.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Gerelateerde pagina's

Handleiding:CSS positionering

Referentie:CSS position eigenschap

Referentie:CSS writing-mode eigenschap