Inzet-block-end - CSS-trucs | CSS Almanac 2025

inset-block-endis een logische CSS-eigenschap die de lengte instelt waarmee een element wordt verschoven in de blokrichting vanaf de eindrand. Het is een beetje zoals declareren, bottombehalve dat het eindpunt wordt bepaald door de elementen direction, text-orientationen writing-mode, net als andere logische eigenschappen.

De eigenschap maakt deel uit van de CSS Logical Properties and Values Level 1-specificatie die momenteel de Editor's Draft-status heeft. Dat betekent dat de definitie en informatie erover kan veranderen tussen nu en officiële aanbeveling.

.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Als de schrijfmodus bijvoorbeeld is ingesteld op horizontal-lrde inset-block-endeigenschap, zal deze zich net zo gedragen als bottomen de verschuiving van het element vanaf de onderrand instellen. U moet zelfs een expliciet positionvoor hetzelfde element specificeren om het van kracht te laten worden, net als bij bottomandere fysieke offset-eigenschappen.

Maar verander het element writing-modein iets dergelijks vertical-lren de "onderste" rand wordt in verticale richting geroteerd en gedraagt zich meer als de righteigenschap.

Syntaxis

inset-block-end: ;

Beginwaarde: auto
Geldt voor: gepositioneerde elementen
Overgenomen: nee
Percentages: zoals voor de bijbehorende fysieke eigenschap
Berekende waarde: hetzelfde als de bijbehorende bottomeigenschap
Animatietype: op type berekende waarde

Waarden

inset-block-endheeft een lengtewaarde en ondersteunt globale trefwoorden. De standaardwaarde is auto.

/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-end: unset;