CSS inset-block-end ominaisuus

Määrittely ja käyttö

inset-block-end ominaisuus asettaa elementin lohkon suunnan lopun etäisyyden vanhemman elementistä.

Huomioitavaa:Tämän ominaisuuden toimivuuden varmistamiseksi on määritettävä position ominaisuuden kanssa.

CSS:n inset-inline ja inset-block ominaisuudet ovat CSS:n top,bottom,left ja right ominaisuudet ovat hyvin samanlaisia, mutta inset-block ja inset-inline Ominaisuus riippuu lohkon ja rivin suunnasta.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode Määrittelee lohkon suunnan. Tämä vaikuttaa lohkon alkuperäiseen ja loppusijaintiin sekä inset-block-end Ominaisuuden tulos. Englanninkielisillä sivuilla lohkon suunta on alas ja rivin suunta vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta sijoitettu <div>-elementin lohkon suunnan lopun etäisyys vanhemman elementistä:

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

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuuden arvo on vertical-rl, lohkon suunta on oikealta vasemmalle. Tulos on, että elementin pää siirtyy alhaalta vasemmalle:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo Kuvaus
auto Oletusarvo. Elementin oletusarvoinen lisäysetäisyys.
length Määritä etäisyys px, pt, cm ym. yksiköissä. Sallitaan negatiiviset arvot. Katso:CSS yksikkö.
% Määritä suhteellinen etäisyys vanhempien elementin suhteen vastaavassa akselissa tietyn suuruiseksi prosenttimääräksi.
initial Aseta tämä ominaisuus sen oletusarvon arvoksi. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen tarkistus

Oletusarvo: auto
Perintä: Ei
Animaation tekeminen: Tuki. Katso:Animaatiotunnukset.
Versio: CSS3
JavaScript-kieli: object.style.insetBlockEnd="100px"

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Aiheeseen liittyvät sivut

Oppitunnit:CSS sijoittelu

Viittaus:CSS position ominaisuus

Viittaus:CSS writing-mode ominaisuus