margin-inlineとmargin-blockを使ってみる

2024.05.19

margin-inlineとmargin-blockを使ってマージンを設定してみます。

margin-inline

margin-inlineはインライン方向の先頭と末尾(左と右)のマージンを設定できます。

<div class="sample">sample</div>

.sample {
	margin-inline: auto;
}

これで左右にマージンのautoが設定できました。
margin-inlineのデモページ1

設定値が1つの場合は左右に同じ値を適用しますが、2つ設定した場合は1つ目が先頭(左)、2つ目が末尾(右)に適用されます。

<div class="wrap">
  <div class="sample1">sample1</div>
  <div class="sample2">sample2</div>
  <div class="sample3">sample3</div>
</div>

.wrap {
	display: flex;
}
.sample2 {
	margin-inline: 20px 60px;
}

margin-inlineを個別に設定できる、margin-inline-startとmargin-inline-endもあります。

.sample2 {
	margin-inline-start: 20px;
	margin-inline-end: 60px;
}

注意点として、テキストの記述方向によって設定される方向が変わります。
例えばテキストを縦書きにしてみます。

<div class="sample">sample</div>

body {
	writing-mode: vertical-lr;
}
.sample {
	margin-inline: auto;
}

この場合、テキストの方向が縦(上から下)になったので、margin-inlineの適用される方向も上と下になりました。
margin-inlineのデモページ4

次にmargin-blockですが、ブロック方向の先頭と末尾(上と下)のマージンを設定できます。

<div class="wrap">
  <div class="sample1">sample1</div>
  <div class="sample2">sample2</div>
  <div class="sample3">sample3</div>
</div>

.sample2 {
	margin-block: 30px;
}

これで上下に30pxのマージンが設定できました。
margin-blockのデモページ1

設定値が1つの場合は上下に同じ値を適用しますが、2つ設定した場合は1つ目が先頭(上)、2つ目が末尾(下)に適用されます。

.sample2 {
	margin-block: 20px 60px;
}

margin-inlineの時と同じく、個別指定のプロパティもあります。

.sample2 {
	margin-block-start: 20px;
	margin-block-end: 60px;
}

テキストを縦書きにしてみます。

body {
	writing-mode: vertical-lr;
}
.sample2 {
	margin-block: 20px 60px;
}

この場合、テキストの方向が縦で左から右に流れる設定になるので、margin-blockの先頭は左、末尾は右の形で適用されます。
margin-blockのデモページ4

参考サイト