margin-inline-end
CSS nuosavybė apibrėžia, kiek vietos palei išorinį nesibaigianti kraštas inline kryptimi elementas. Jis įtrauktas į CSS loginių ypatybių 1 lygio specifikaciją, kuri šiuo metu yra darbo projekte.
.element ( margin-inline-end: 25%; writing-mode: vertical-lr; )
Galūnė kraštas inline kryptimi lemia elemento writing-mode
, direction
ir text-orientation
. Taigi, naudojant margin-inline-end
horizontaliame kontekste iš kairės į dešinę, jis veikia taip margin-right
pat, kaip elemento galinis kraštas yra dešinė.
Bet jei pakeisime writing-mode
, tarkime, į vertikalųjį elementą, elementas pasukamas pagal laikrodžio rodyklę, galinį kraštą dedant link apačios. Dėl to margin-inline-end
elgiasi taip pat margin-bottom
. 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-end:
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-top
kurios 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-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;
Demonstracija
Spustelėkite mygtuką kitoje demonstracinėje versijoje, kad pamatytumėte, kaip elemento galinis briaunotas kraštas keičiasi su 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+ |