【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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト