Paraštė įterpta - CSS-gudrybės

margin-inlineyra CSS trumpinio ypatybė, nustatanti elemento margin-inline-startir margin-inline-endreikšmes, kurios abi yra loginės savybės. Jis sukuria erdvę aplink inline kryptimi elementas, kuris yra nustatomas pagal elemento writing-mode, directionir text-orientation.

Nuosavybė yra CSS loginių ypatybių ir reikšmių 1 lygio specifikacijos dalis, kuri šiuo metu yra redaktoriaus juodraščio būsenoje. Tai reiškia, kad apibrėžimas ir informacija apie jį gali pasikeisti nuo dabar iki oficialios rekomendacijos.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Jei writing-modenustatyta kaip horizontal-lr, margin-inlinenuosavybė veiks taip pat, kaip nustatymas margin-leftir margin-right. Vienas įdomus šios ypatybės aspektas yra tas, kad ji yra viena iš loginių savybių, neturinti žemėlapio „vienas su vienu“ su logiška ypatybe. Nėra senesnės ypatybės, kuri nustatytų tiek (ir tik) tiesiosios krypties paraštes.

Bet pakeiskite elementą writing-modeį kažką panašaus, vertical-lro „įterptosios“ briaunos pasisuks vertikalia kryptimi, veikdamos labiau kaip margin-topir margin-bottomsavybės.

Sintaksė

margin-inline: (1,2)

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 kaip margin-top(iki dviejų kartų), kuri 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

Jei esate susipažinę su marginstenografijos nuosavybe, tada margin-inlinejausitės labai gerai. Skirtumas tik tas, kad jis veikia dviem kryptimis, o ne keturiomis.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;