ホームへ

【CSS】paddingやmarginの上下左右の順番を見て確認しよう

margin: 20px 150px 5px 50px

CSSで余白の調整の際に必ず使うpaddingやmarginは上下左右それぞれを一行で指定できます。
その順番について説明します。

ここではmarignを例に挙げていますが、paddingも同じ順番です。

順番:上 右 下 左(↑→↓←)

上右下左(↑→↓←)
12時から時計回りと覚えましょう。

全部違うとき

すべて違う値にしたいときは、上 右 下 左の順に半角スペースを挟みながら指定します。

margin: 20px 150px 5px 50px

margin: 20px 150px 3px 50px = margin: 上 右 下 左

全部同じとき

上下左右同じ値を指定したいときは数値を一つだけ指定します。

margin: 20px

margin: 20px = margin: 全部

上下と左右それぞれ同じとき

上下と左右それぞれ同じ値にしたいときは、上下 左右の順に半角スペースを挟みながら指定します。

margin: 20px 100px

margin: 20px 100px = margin: 上下 左右

上と下が違い左右は同じとき

左右だけは同じ値のときは、上 左右 下の順に半角スペースを挟みながら指定します。

margin: 20px 100px 3px

margin: 20px 100px 3px = margin: 上 左右 下

左と右が違い上下は同じとき

この場合、特別な一行指定方法はありません。「全部違うとき」のように上 右 下 左の順にそれぞれ指定しましょう。

margin: 20px 150px 20px 50px

margin: 20px 150px 20px 50px = margin: 上 右 下 左

まとめ

全部違うとき上 右 下 左(4つ)
全部同じとき上下左右(1つ)
上下と左右それぞれ同じとき上下 左右(2つ)
上と下が違い左右は同じとき上 左右 下(3つ)
左と右が違い上下は同じとき上 右 下 左(4つ)

以上、paddingやmarginを1行で指定するときの順番でした。

マンガで読める関連記事