Margin-inline-start - CSS-gudrybės

Turinys

margin-inline-startCSS objekto apibrėžia, kiek vietos palei išorinį atskaitos kraštas Eilutinio kryptimi elemento. Jis įtrauktas į CSS loginių ypatybių 1 lygio specifikaciją, kuri šiuo metu yra darbo projekte.

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

Pradinė krašto inline kryptimi yra nustatomas pagal elemento writing-mode, directionir text-orientation. Taigi, naudojant margin-inline-starthorizontaliame kontekste iš kairės į dešinę, jis veikia taip margin-leftpat, kaip pradinis elemento kraštas yra kairė pusė.

Bet jei pakeisime writing-mode, tarkime, į vertikalųjį elementą, elementas pasisuks pagal laikrodžio rodyklę, pradinį kraštą pastatydamas link viršaus. Dėl to margin-inline-startelgiasi taip pat margin-top. Iš esmės pradinis kraštas yra santykinis su jo tekėjimo kryptimi. Tai ir turime omenyje kalbėdami apie „logines“ savybes.

Sintaksė

margin-inline-start: 

Labai keista matyti, kai vienos nuosavybės sintaksė dokumentuose nurodo kitos CSS nuosavybės teisės sintaksę, bet iš tikrųjų tai yra. Iš esmės bandoma pasakyti tai, kad nuosavybė priima tas pačias reikšmes, margin-topkurios atitinka šią sintaksę:

margin-top: | | auto;
  • Pradinė vertė: 0
  • Taikoma: visiems elementams, išskyrus vidinius stalo elementus, rubino pagrindo talpas ir rubino anotacijos talpyklas
  • Paveldima: ne
  • Procentai: kaip ir atitinkamai fizinei nuosavybei
  • Apskaičiuota vertė: tokia pati kaip ir atitinkamų margin-*savybių
  • Animacijos tipas: pagal apskaičiuotą vertės tipą

Vertybės

margin-block-start priima vieną ilgio ar raktinio žodžio vertę.

/* 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;

Demonstracija

Spustelėkite mygtuką šioje demonstracinėje versijoje, kad pamatytumėte, kaip keičiasi pradinis vidinis elemento kraštas writing-mode.

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne 79+ 41+ 69+ 12.1+ 56 ir daugiau
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
Taip Taip 81+ 12.2+ 59+
Šaltinis: caniuse

Papildoma literatūra

Straipsnis 2018 m. Rugpjūčio 31 d

CSS loginės savybės

paraštė Geoff Graham

Įdomios straipsniai...