CSS inset-block-start egenskap

Definition och användning

inset-block-start egenskapen sätter elementets avstånd till föräldrelementet i blockriktningen.

Observera:För att detta egenskap ska fungera måste du specificera position egenskaper.

CSS inset-inline och inset-block egenskaper är relaterade till CSS topp,botten,vänster och höger Egenskapen är mycket lik, men inset-block och inset-inline Egenskapen är beroende av blockriktning och riktning.

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

Exempel

Exempel 1

Ställ in en positionerad <div>-elementets avstånd till föräldrelementet i blockriktningen:

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

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till vertical-rl, är blockriktningen från höger till vänster. Resultatet är att elementets början flyttas till höger:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Använd elementets standard inset-avstånd.
length

Använd fasta enheter (som px, pt, cm osv.) för att specificera avståndet. Negativa värden är tillåtna.

Se vidare:CSS enheter.
% Använd procent för att specificera avståndet, relativt till föräldrelementets storlek på motsvarande axel.
initial Ställ in detta egenskap till dess standardvärde. Se vidare: initial.
inherit Följ från föräldrelementet detta egenskap. Se vidare: inherit.

Tekniska detaljer

Standardvärde: auto
Arvbarhet: Nej
Animeringsproduktion: Stöd. Se vidare:Animeringsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.insetBlockStart="100px"

Webbläsarstöd

Tabellens siffror representerar den första webbläsarens version som helt stöder detta egenskap.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Relaterade sidor

Lärord:CSS-positionering

Referens:CSS position egenskap

Referens:CSS writing-mode egenskap