Indsat-blok-ende - CSS-tricks

inset-block-ender en logisk CSS-egenskab, der indstiller længden, som et element forskydes i blokretningen fra dets slutningskant. Det er lidt ligesom at erklære bottomundtagen sin slutpunktet bestemmes af elementets direction, text-orientationog writing-mode, ligesom andre logiske egenskaber.

Ejendommen er en del af CSS logiske egenskaber og værdier niveau 1 specifikation, som i øjeblikket er i Editor's kladdestatus. Det betyder, at definitionen og informationen om den kan ændre sig fra nu til officiel anbefaling.

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

Så for eksempel, hvis skriften er indstillet til horizontal-lrden inset-block-endejendom vil fungere ligesom bottomog sætte elementet er forskudt fra den nederste kant. Du skal endda angive et eksplicit positionpå det samme element for at det kan træde i kraft, ligesom bottomog andre fysiske forskydningsegenskaber.

Men skift elementets writing-modetil noget lignende, vertical-lrog “bundkanten” roteres i lodret retning og virker mere som rightejendommen.

Syntaks

inset-block-end: ;

Startværdi: auto
Gælder for: placerede elementer
Arvet: nej
Procentdele: som for den tilsvarende fysiske egenskab
Beregnet værdi: samme som den tilsvarende bottomegenskab
Animationstype: efter beregnet værditype

Værdier

inset-block-endtager en længdeværdi og understøtter globale søgeord. Dens standardværdi er 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;