CSS inset-block egenskap

Föregående sida inset
Nästa sida inset-block-end

Definition och användning

inset-block Avståndselement för egenskapssättning mellan element och föräldrelement i blockriktning.

Observera:För att detta värde ska fungera måste det specificeras. position egenskaper.

inset-block Egenskapsvärdet är en förkortning av följande egenskaper:

inset-block-start
inset-block-end

inset-block Egenskapsvärdet kan ställas in på olika sätt:

Om inset-block-egenskapsvärdet har två värden:

inset-block: 10px 50px;

Början är 10px
Slutet är 50px

Om inset-block-egenskapsvärdet har ett värde:

inset-block: 10px;

början och slut är 10px

CSS:s inset-block och inset-inline egenskaper är lika med CSS: topp,botten,vänster och höger Egenskapsvärden är mycket lika, men inset-block och inset-inline Egenskapen beroende av blockriktning och inline-riktning.

Observera:relaterade CSS-egenskaper writing-mode Definierar blockriktningen. Detta påverkar blockets början och slut, samt inset-block Egenskapens resultat. För engelska sidor är blockriktningen neråt, inline-riktningen är från vänster till höger.

Exempel

Exempel 1

Ställ in avancerade <div>-element på avstånd i blockriktningen från föräldrelementet:

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

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till vertical-rl, flyttas elementets början från toppen till höger och elementets slut från botten till vänster:

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

Prova själv

CSS-syntax

inset-block: auto|längd|initial|inherit;

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standard inset-block-värde.
längd	Specificera avståndet i enheter som px, pt, cm, etc. Tillåter negativa värden. Se till:CSS enheter.
%	Specificera en procentsats av avståndet från föräldrelementet på motsvarande axel.
initial	Sätt detta värde till dess standardvärde. Se till: initial.
inherit	Följande från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvsförmåga:	Nej
Animation production:	Stöd. Se till:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.insetBlock="100px 50px"