CSS inset-inline egenskab

Definition og brug

inset-inline indstille elementets afstand til forældrelementet i rækkefølgen.

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

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

inset-inline Værdierne for egenskaben kan indstilles på forskellige måder:

Hvis 'inset-inline'-egenskaben har to værdier:

inset-inline: 10px 50px;
  • Startafstanden er 10px
  • Afslutningsafstanden er 50px

Hvis inset-inline-egenskaben har en værdi:

inset-inline: 10px;
  • afstanden til start- og slutenden er begge 10px

CSS' inset-inline og inset-block egenskaber er sammenlignelige med CSS' top,bund,venstre og højre Egenskaber er meget lignende, men inset-block og inset-inline Egenskaben afhænger af blokretning og række-retning.

Bemærk:relaterede CSS-egenskaber writing-mode og direction Definerer række-retningen. Dette påvirker rækernes start- og slutpositioner samt inset-inline Resultatet af egenskaben. For engelske sider er række-retningen fra venstre til højre, og blok-retningen er nedad.

Eksempel

Eksempel 1

Indstil en positioneret <div>-element afstanden mellem elementet og forældreelementet i række-retningen:

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

Prøv det selv

Eksempel 2

Når <div>-elementets writing-mode Når egenskabsværdien sættes til vertical-rl, er retningen for rækken nedad. Resultatet er, at elementets startende del flyttes fra venstre til toppen, og afsluttende del fra højre til bunden:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Prøv det selv

Eksempel 3

Når <div>-elementets direction Når egenskabsværdien sættes til rtl, er retningen for rækken fra højre til venstre. Resultatet er, at elementets startende del flyttes fra venstre til højre, og afsluttende del fra højre til venstre:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
auto Standardværdi. Elementets standard inset-inline-afstand.
length Specificer afstanden med enheder som px, pt, cm osv. Tillader negative værdier. Se:CSS units.
% Specificer en procentdel af afstanden fra forældreelementet på den tilsvarende akse.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arv denne egenskab fra sin forældreelement. Se: inherit.

Tekniske detaljer

Standardværdi: auto
Arv: Nej
Animation production: Understøttelse. Se:Animation-relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.insetInline="100px 50px"

Browser-understøttelse

Tallene i tabellen viser den første browser-version, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

relaterede sider

Tilførsel:CSS定位

Referencer:CSS position egenskab

Referencer:CSS direction egenskab

Referencer:CSS writing-mode egenskab