【CSS】margin/paddingの上右下左の順番の覚え方(TIPs)

web系のバックエンドエンジニアだと、CSSは書くより読む方（＋変更）が多いかもしれません。

そんな中で、borderの外側の余白を指定するプロパティ

margin: 2px 3px 4px;

とか、borderの内側の余白を指定するプロパティ

padding: 5px 10px;

とかを見て、上下左右をそれぞれどれで指定しているかパッとわかりますか？

まあ、パッと見てわからなければググれば良いんですが、毎度ググるのも面倒。ということで、その順番を覚えてしまいましょう。

大丈夫です、基本をひとつ押さえれば、あとは考え方の応用なので、簡単に覚えられますよ♪

４つ全指定の場合は上→右→下→左

４つ全て指定されている場合は、上→右→下→左の順です。

margin: 1px 2px 3px 4px;

これが基本です。原則、これを押させておきましょう。

要するに上から時計回りです。

これさえ覚えてしまえば、後は応用です。

３つ指定の場合は上→右→下（→左）

４番目の「左」が省略されていると考えます。そして「左」を省略した場合は「右」（2番目）と同じ値が当てられます。

margin: 1px 2px 3px;

左右で同じ値を指定したいことはよくあると思うので、自然な流れですよね。

指定している順に、上、左右、下の順番に並んでいるわけですが、これだと私は覚えにくかったので、上記のような考え方をすることにしました。

２つ指定の場合は上→右（→下→左）

３, ４番目の「下」「左」が省略されていると考えます。「下」を省略した場合は「上」（１番目）と同じ値が当てられます。

margin: 1px 2px;

上下で同じ値を指定したいことはよくあると思うので、自然な流れですよね。

上下、左右の順番に並んでいるので、これはわかりやすいかもしれません。

１つ指定の場合は上（→右→下→左）

２, ３, ４番目の「右」「下」「左」が省略されていると考えます。「右」を省略した場合は「上」（１番目）と同じ値が当てられます。

margin: 1px;

まあ、これはこんな覚え方しなくてもなんとなくわかるというか、これ以外ないので、この考え方をする必要はないかもしれませんが、一応、この考え方の延長でも説明できるよ、ということで紹介してみました。

まとめ

わざわざこんな覚え方をしなくても覚えてるよ、という方には不要かもしれませんが、「そんな考え方もあるんだ！」ということでご査収いただければ幸いです。（そういう趣旨のブログなので。）

総じて言えるポイントは、省略されているだけで、指定されている！ということですね。

右の余白だけ変更したくて、３つ指定されているうち２番目を変更したら左の余白も変わってしまってあれれ？ということにならないよう、お気をつけください。

一部だけ指定したい場合は、下記プロパティを使用しましょう。

この記事がお役に立てれば幸いです。

はるすと

最後まで読んでくださってありがとうございました！