margin-inline
Logical properties: sizes and spacing by the direction of the text instead of left, right, top and bottom.
Syntax
margin-inline: start end;Values
| Parameter | Type | Description |
|---|---|---|
| margin-inline | length | Margins at the start and end of a line — left and right in English. |
| margin-block | length | Margins before and after a block — top and bottom. |
| padding-inline | padding-block | length | The same for padding. |
| inline-size | block-size | length | Logical width and height. |
| inset | length | A shorthand for `top`, `right`, `bottom` and `left` at once: `inset: 0`. |
Examples
Centering and spacing with logical properties:
<style>
.box { margin-inline: auto; padding-inline: 16px; padding-block: 8px; inline-size: 200px; background: lavender; }
</style>
<div class="box">Centered with margin-inline</div>inline-start follows the direction of the text:
<style>
p { border-inline-start: 4px solid teal; padding-inline-start: 8px; }
</style>
<p>English: the line is on the left.</p>
<p dir="rtl">Right-to-left text: the line is on the right.</p>Notes
In left-to-right languages margin-inline is simply margin-left and margin-right — but in Arabic or Hebrew the sides swap automatically. inset: 0 with position: absolute stretches an element over its whole container.
See also
- margin — The outer spacing of an element — the distance to its neighbors.
- padding — The inner spacing between the content and the border of an element.
- top, right, bottom, left — The offsets of a positioned element from the edges of its reference box: top, right, bottom and left.
In the tutorial
- Logical properties — Properties that depend on the text direction rather than the sides of the screen — margin-inline, padding-block, inline-size, inset-inline and writing-mode.