margin-inline

このページのプレビューでは、margin の部分を橙色で塗っています。プレビューは左から右への横書きなので、始まりが左、終わりが右です。

値の書き方

• 値を 1 つ書くと両側に、2 つ書くと始まり（margin-inline-start）と終わり（margin-inline-end）の順に効きます。
• 書ける値は margin と同じで、長さ・%・auto と負の値です。% は親の箱のインライン方向の大きさ（横書きなら幅）に対する割合です。
• 初期値は 0 です。

向きで変わること

• direction: rtl で右から左に書く言語では、始まりが右、終わりが左になります。
• writing-mode: vertical-rl などの縦書きでは、始まりが上、終わりが下になります。
• どの辺になるかは、親ではなくその要素自身の writing-mode と direction で決まります。

トップページで writing-mode のブロックと重ねると、同じ値のまま余白が上下に移るのを確かめられます。

よく使う場面

• margin-inline: auto：幅を決めたブロック要素を、左右の中央に寄せます。
• アイコンと文字の間をあけるときに margin-inline-end を使うと、右から左に書く言語でも文字の側に余白が付きます。

気をつけること

• 横書きでは margin-left・margin-right と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
• インライン方向の margin は、隣の要素の margin と相殺されません（相殺はブロック方向の margin だけで起きます）。
• 主要なブラウザすべてで使えます。