Paraštės blokavimas - CSS-gudrybės

margin-blockyra CSS trumpinio ypatybė, nustatanti elemento margin-block-startir margin-block-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-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Jei writing-modenustatyta kaip horizontal-lr, margin-blocknuosavybė veiks taip pat, kaip nustatymas margin-topir margin-bottom. 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, nustatančios tiek (ir tik) blokavimo krypties paraštes.

Bet pakeiskite elementą writing-modeį kažką panašaus vertical-lrir „apatinis“ kraštas pasisuks vertikalia kryptimi, veikdamas labiau ir margin-leftir margin-rightsavybėmis.

Sintaksė

margin-block: (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-blockjausitės labai gerai. Skirtumas tik tas, kad jis veikia dviem kryptimis, o ne keturiomis.

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