Margin-inline-end - CSS-trucs

De margin-inline-endeigenschap in CSS definieert de hoeveelheid ruimte langs de buitenste eindrand van een element in de inline-richting. Het is opgenomen in de CSS Logical Properties Level 1-specificatie, die momenteel in Working Draft staat.

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

De eindrand in de inline-richting wordt bepaald door de writing-mode, directionen text-orientation. Dus bij gebruik margin-inline-endin een horizontale context van links naar rechts, werkt het net zoals margin-rightde eindrand van het element de rechterkant is.

Maar als we het veranderen writing-modenaar bijvoorbeeld verticaal, wordt het element met de klok mee gedraaid, waarbij de eindrand naar beneden wordt geplaatst. Dientengevolge margin-inline-endgedraagt zich net als margin-bottom. Kortom, de startrand is relatief ten opzichte van de richting waarin deze stroomt. Dat is wat we bedoelen als we het hebben over "logische" eigenschappen.

Syntaxis

margin-inline-end:

Het is een beetje raar om te zien dat de syntaxis van de ene eigenschap verwijst naar de syntaxis van een andere CSS-eigenschap in de documentatie, maar dat is het echt. Wat het in feite probeert te zeggen, is dat de eigenschap dezelfde waarden accepteert als margin-topdeze syntaxis volgt:

margin-top: | | auto;

Beginwaarde: 0
Van toepassing op: alle elementen behalve interne tabelelementen, ruby-basiscontainers en ruby-annotatiecontainers
Overgenomen: nee
Percentages: zoals voor de bijbehorende fysieke eigenschap
Berekende waarde: hetzelfde als overeenkomstige margin-*eigenschappen
Animatietype: op type berekende waarde

Waarden

margin-block-start accepteert een enkele lengte of trefwoordwaarde.

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