CSS: margin 、padding の上下左右の順番を図で確認

CSS で margin プロパティや padding プロパティを指定するときの、 上下左右の順番を図で確認します。慣れない間は忘れやすいですよね。

ポイントは上下左右のなかで、上が起点となることです。
4つ指定の場合、3つ指定の場合、2つ指定の場合を順番に見ていきます。

4つ指定の場合:上、右、下、左


margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;

4つを指定する場合は、上、右、下、左の順番です。 上を基点に時計回りになります。

4

3つ指定の場合:上、左右、下


margin: 1px 2px 3px;
padding: 1px 2px 3px;

3つを指定する場合は、上、左右、下の順番です。上を基点に下へ降りていきます

3

2つ指定の場合:上下、左右


margin: 1px 2px;
padding: 1px 2px;

2つを指定する場合は、上下、左右の順番です。

2
HTML・CSS入門