CSS inset-block ominaisuus

Määrittely ja käyttö

inset-block Elementin etäisyys isäelementistä suuntaan, jossa elementti sijaitsee.

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

inset-block Ominaisuus on seuraavien ominaisuuksien lyhennys:

• inset-block-start
• inset-block-end

inset-block Ominaisuuden arvo voidaan asettaa eri tavoin:

Jos inset-block-ominaisuudella on kaksi arvoa:

div {

• alkusijainti on 10px
• loppusijainti on 50px

Jos inset-block-ominaisuudella on arvo:

inset-block: 10px;

• alku- ja loppusijainnit ovat 10px

CSS:n inset-block ja inset-inline Ominaisuudet ovat CSS:n top,bottom,left ja right Ominaisuus on hyvin samanlainen, mutta inset-block ja inset-inline Ominaisuus riippuu blokki- ja rivi- suunnasta.

Huomioitavaa:liittyviin CSS- ominaisuuksiin Kun <div>-elementin Määrittelee blokki- suunnan. Tämä vaikuttaa blokin alkupisteeseen ja loppupisteeseen sekä inset-block Englanninkielisillä sivuilla blokki- suunta on alas ja rivi- suunta vasemmalta oikealle.

Ominaisuuden tuloksena.

Esimerkki

Esimerkki 1

Ominaisuuden arvon asettaminen vertical-rl:llä siirtää elementin alkupisteen ylältä oikealle ja loppupisteen alalta vasemmalle:
  div {
writing-mode: vertical-rl;

}

Aseta sijoitettu <div>-elementtiä vanhemman elementin kanssa etäisyydellä blokki- suunnassa:

Esimerkki 2 Kun <div>-elementin writing-mode

Ominaisuuden arvon asettaminen vertical-rl:llä siirtää elementin alkupisteen ylältä oikealle ja loppupisteen alalta vasemmalle:
  div {
  inset-block: 10px 50px;
writing-mode: vertical-rl;

}

Kokeile itse

CSS syntaksiOletusarvo. Elementin oletusarvoinen inset-block-arvo.inset-block: auto|

|initial|inherit;

inherit

Selaimen tuki

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

Liittyvät sivut

Oppitunti:CSS sijoittelu

Viittaus:CSS position ominaisuus

Viittaus:CSS inset-block-end ominaisuus

Viittaus:CSS inset-block-start ominaisuus

Viittaus:CSS writing-mode ominaisuus