CSS inset-block egenskab

Forrige side inset
Næste side inset-block-end

Definition og brug

inset-block Egenskabsindstillinger for elementets afstand til forældrelementet i blokretning.

Bemærk:For at gøre denne egenskab effektiv skal du specificere position egenskaber.

inset-block Egenskaben er en forkortelse af følgende egenskaber:

inset-block-start
inset-block-end

inset-block Egenskabsværdien kan indstilles på forskellige måder:

Hvis inset-block egenskaben har to værdier:

inset-block: 10px 50px;

Startafstanden er 10px
Slutafstanden er 50px

Hvis inset-block egenskaben har en værdi:

inset-block: 10px;

Start- og slutafstanden er begge 10px

CSS inset-inline egenskaber er ens med CSS toppen,bunden,venstre og højre Egenskaben er meget ligner, men inset-block og inset-inline Egenskaben afhænger af blokretning og inline-retnings.

Bemærk:relaterede CSS egenskaber writing-mode Definerer blokretningen. Dette påvirker blokkens start- og slutpositioner samt inset-block Resultatet af egenskaben. For engelske sider er blokretningen nedad og inline-retnings er fra venstre til højre.

Eksempel

Eksempel 1

Indstil afstand til forældrelementet i blokretningen for en positioneret <div>-element:

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

Prøv det selv

Eksempel 2

Når <div>-elementets writing-mode Når egenskaben vertical-rl er sat, flytter elementets startposition til højre fra toppen og elementets slutposition til venstre fra bunden:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
auto	Standardværdi. Elementets standard inset-block værdi.
length	Specificer afstanden med enheder som px, pt, cm osv. Negative værdier er tilladt. Se:CSS enheder.
%	Specificer en procentdel af afstanden fra forældrelementet i den tilsvarende akse.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi:	auto
Arv:	Nej
Animation laver:	Understøttet. Se:Animation relaterede egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.insetBlock="100px 50px"