CSS inset-block eigenschap

Vorige pagina inset
Volgende pagina inset-block-end

Definitie en gebruik

inset-block De afstand tussen het element van de eigenschap instellen en het ouder element in de blokkenrichting.

Opmerking:Om deze eigenschap effectief te maken, moet deze waarde worden gespecificeerd. position eigenschappen.

inset-block De eigenschap is een afkorting van de volgende eigenschappen:

inset-block-start
inset-block-end

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

Als de inset-block-eigenschap twee waarden heeft:

inset-block: 10px 50px;

de beginafstand is 10px
de eindafstand is 50px

Als de inset-block-eigenschap een waarde heeft:

inset-block: 10px;

de begin- en eindafstanden zijn beide 10px

CSS-eigenschappen inset-block en inset-inline eigenschappen zijn vergelijkbaar met de CSS- top,bottom,left en right De eigenschap is 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 begin- en eindposities van de blokken, evenals inset-block 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 een geplaatste <div>-element in op afstand in de blokkenrichting ten opzichte van het ouderlijke element:

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

Probeer het zelf

Voorbeeld 2

Wanneer de <div>-elementen writing-mode Als de eigenschap vertical-rl is ingesteld, verhuist de beginpositie van het element van boven naar rechts en de eindpositie van het element van onder naar links:

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

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De standaard inset-block-waarde van het element.
length	Specificeer een afstand in eenheid zoals px, pt, cm, enz. Negatieve waarden zijn toegestaan. Raadpleeg:CSS Eenheid.
%	Specificeer een percentageafstand ten opzichte van de grootte van het ouderlijke element op de overeenkomstige as.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.insetBlock="100px 50px"