marginとpaddingの書式って忘れやすいです

今更ながら marginやpaddingなど複数の値を設定するときに、どこの場所の設定になるのか忘れるときがあります。

私の場合windowsの矩形を描画する関数が左、上、右、下という並びで、長年使用してきたので身体に染み付いていて、ついつい混同してしまうんです。

1.marginとpadding

marginとpaddingの書式は同じなので、marginを例にして書いていきます。

margin 値が１つの場合

margin: 10px;

上下左右 10px

margin 値が2つの場合

margin: 10px 20px;

上下 10px / 左右 20px

margin 値が3つの場合

margin: 10px 20px 30px;

上 10px / 左右 20px / 下 30px

margin 値が4つの場合

margin: 10px 20px 30px 40px;

上 10px / 右 20px / 下 30px / 左 40px

私はここが一番まぎわらしいところですが、上から時計回りの順でセットするんですね。改めて気づきました。

---

2.border-radius

marginとpaddingだけでは寂しいので、border-radiusについても書きます。設定するのは角 です。

border-radius 値が１つのとき

border-radius: 12px;

上下左右 12px

border-radius 値が2つのとき

border-radius: 8px 16px;

左上 右下 8px / 右上 左下 16px

border-radius 値が3つのとき

border-radius: 8px 10px 12px;

左上 8px / 右上 左下 10px / 右下 12px

border-radius 値が4つのとき

border-radius: 6px 8px 10px 12px;

左上 6px / 右上 8px / 右下 10px / 左下 12px

これも時計回りですね。