Margin-inline - CSS-trucs | CSS Almanac 2025

margin-inlineis een afgekorte eigenschap in CSS die de waarden van een element margin-inline-starten margin-inline-endwaarden instelt , die beide logische eigenschappen zijn. Creëert ruimte rond het element in de inline richting, die bepaald wordt door het element writing-mode, directionen text-orientation.

De eigenschap maakt deel uit van de CSS Logical Properties and Values Level 1-specificatie die momenteel de Editor's Draft-status heeft. Dat betekent dat de definitie en informatie erover kan veranderen tussen nu en officiële aanbeveling.

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

Als de writing-modeis ingesteld op horizontal-lr, werkt de margin-inlineeigenschap net als de instelling margin-leften margin-right. Een interessant aspect van deze eigenschap is dat het een van de logische eigenschappen is die geen één-op-één-kaart met een niet-logische eigenschap heeft. Er is geen oudere eigenschap die zowel (en alleen) de inline richtingsmarges instelt.

Maar verander de elementen writing-modein iets dergelijks vertical-lren de "inline" randen worden in verticale richting geroteerd , waardoor ze meer op de margin-topen margin-bottomeigenschappen lijken .

Syntaxis

margin-inline: (1,2)

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-top(maximaal twee keer) die volgt op deze syntaxis:

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

Als u bekend bent met de marginsteno-eigenschap, margin-inlinevoelt u zich heel vertrouwd. Het enige verschil is dat het in twee richtingen werkt in plaats van in vier.

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