Infälld-block-slut - CSS-tricks

inset-block-endär en logisk CSS-egenskap som ställer in den längd som ett element förskjuts i blockriktningen från dess slutkant. Det är som att förklara bottomförutom att dess slutpunkt bestäms av elementets direction, text-orientationoch writing-modeprecis som andra logiska egenskaper.

Egenskapen är en del av CSS Logical Properties and Values Level 1-specifikationen som för närvarande är i Editors utkaststatus. Det betyder att definitionen och informationen om den kan ändras mellan nu och officiell rekommendation.

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

Så till exempel om skrivläget är inställt på horizontal-lrden inset-block-endegenskapen kommer att fungera precis som bottomoch ange elementets förskjuten från den nedre kanten. Du måste till och med ange ett uttryck positionför samma element för att det ska träda i kraft, precis som bottomoch andra fysiska förskjutningsegenskaper.

Men ändra elementets writing-modetill något liknande vertical-lroch "botten" kanten roteras i vertikal riktning och fungerar mer som rightegenskapen.

Syntax

inset-block-end: ;

Ursprungligt värde: auto
Gäller för: placerade element
Ärvt: nej
Procentandelar: för motsvarande fysiska egendom
Beräknat värde: samma som motsvarande bottomegenskap
Animationstyp: efter beräknad värdetyp

Värden

inset-block-endtar ett längdvärde och stöder globala sökord. Standardvärdet är 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;