【CSS】paddingやmarginの上下左右の順番を見て確認しよう
CSSで余白の調整の際に必ず使うpaddingやmarginは上下左右それぞれを一行で指定できます。
その順番について説明します。
ここではmarignを例に挙げていますが、paddingも同じ順番です。
順番：上 右 下 左（↑→↓←）
上右下左（↑→↓←）
12時から時計回りと覚えましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
全部違うとき
すべて違う値にしたいときは、上 右 下 左の順に半角スペースを挟みながら指定します。
margin: 20px 150px 3px 50px = margin: 上 右 下 左
全部同じとき
上下左右同じ値を指定したいときは数値を一つだけ指定します。
margin: 20px = margin: 全部
上下と左右それぞれ同じとき
上下と左右それぞれ同じ値にしたいときは、上下 左右の順に半角スペースを挟みながら指定します。
margin: 20px 100px = margin: 上下 左右
上と下が違い左右は同じとき
左右だけは同じ値のときは、上 左右 下の順に半角スペースを挟みながら指定します。
margin: 20px 100px 3px = margin: 上 左右 下
左と右が違い上下は同じとき
この場合、特別な一行指定方法はありません。「全部違うとき」のように上 右 下 左の順にそれぞれ指定しましょう。
margin: 20px 150px 20px 50px = margin: 上 右 下 左
まとめ
| 全部違うとき | 上 右 下 左（4つ） |
| 全部同じとき | 上下左右（1つ） |
| 上下と左右それぞれ同じとき | 上下 左右（2つ） |
| 上と下が違い左右は同じとき | 上 左右 下（3つ） |
| 左と右が違い上下は同じとき | 上 右 下 左（4つ） |
以上、paddingやmarginを1行で指定するときの順番でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
