margin-block

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

値の書き方

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

向きで変わること

• writing-mode: vertical-rl の縦書きでは行が右から左へ進むので、始まりが右、終わりが左になります。vertical-lr では始まりが左です。
• どの辺になるかは、親ではなくその要素自身の writing-mode で決まります。direction では変わりません。

よく使う場面

段落や見出しの間隔を margin-block: 1em のように書くと、縦書きのページでも行が進む向きに間があきます。

気をつけること

• 縦に並んだブロック要素どうしでは、上の要素の margin-block-end と下の要素の margin-block-start が足されず、大きいほうだけになります（margin の相殺）。フレックスボックスやグリッドの項目では起きません。
• auto は、ふつうのブロック要素では 0 になります。フレックスボックスやグリッドの項目では余った広さを割り当てられるので、上下の中央に寄せられます。
• 横書きでは margin-top・margin-bottom と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
• 主要なブラウザすべてで使えます。