Margin-inline-start - CSS-triki

Anonim

margin-inline-startHotel v CSS določa količino prostora vzdolž zunanje začetne robu elementa v smeri na mestu. Vključen je v specifikacijo CSS Logical Properties Level 1, ki je trenutno v delovnem osnutku.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

Začetni rob v smeri inline opredeljujejo ih elementov writing-mode, directionin text-orientation. Torej, pri uporabi margin-inline-startv vodoravnem kontekstu od leve proti desni deluje tako, kot margin-leftda je začetni rob elementa leva stran.

Če pa spremenimo v writing-moderecimo navpično, se element zasuče v smeri urnega kazalca in postavi začetni rob proti vrhu. Posledično se margin-inline-startobnaša tako kot margin-top. V bistvu je začetni rob glede na smer, v katero teče. To imamo v mislih, ko govorimo o "logičnih" lastnostih.

Sintaksa

margin-inline-start: 

Nekako čudno je videti, kako se sintaksa ene lastnosti v dokumentaciji sklicuje na sintakso druge lastnosti CSS, toda res je to. V bistvu poskuša reči, da lastnost sprejema enake vrednosti, kot margin-topsledi tej sintaksi:

margin-top: | | auto;
  • Začetna vrednost: 0
  • Velja za: vse elemente, razen notranjih elementov tabele, ruby ​​osnovnih vsebnikov in ruby ​​zabeležk
  • Podedovano: ne
  • Odstotki: kot za ustrezno fizično lastnost
  • Izračunana vrednost: enako kot ustrezne margin-*lastnosti
  • Vrsta animacije: po izračunani vrednosti

Vrednote

margin-block-start sprejme eno dolžino ali vrednost ključne besede.

/* Length values */ margin-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;

Demo

V naslednji predstavitvi kliknite gumb in si oglejte, kako se začetni rob elementa spremeni z writing-mode.

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
Ne 79+ 41+ 69+ 12,1+ 56+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
Da Da 81+ 12,2+ 59+
Vir: kanius

nadaljnje branje

Članek 31. avgusta 2018

Logične lastnosti CSS

marža Geoff Graham