Insättning-block-start - CSS-tricks

inset-block-startär en logisk CSS-egenskap som ställer in längden som ett element förskjuts i blockriktningen från dess startkant. Det är som att deklarera topförutom att dess startpunkt 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-start: 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-startegenskapen kommer att fungera precis som topoch ange elementets förskjutning från det börjar kant, vilket är den högsta. Du måste till och med ange ett uttryck positionför samma element för att det ska träda i kraft, precis som topoch andra fysiska förskjutningsegenskaper.

Men ändra elementet writing-modetill något liknande vertical-rloch startkanten roteras i vertikal riktning och fungerar mer som leftegenskapen.

Syntax

inset-block-start: ;

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 topegenskap
Animationstyp: efter beräknad värdetyp

Värden

inset-block-starttar ett längdvärde och stöder globala sökord. Standardvärdet är auto.

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