【margin / padding】余白の設定

【margin / padding】余白の設定方法

ボックスを構成する余白にはマージンとパディングの2種類があり、設定方法はだいたい同じです。

マージン(margin)の設定

ボーダーの外側の余白のことをマージン(margin)といいます。
マージンは下記のプロパティで設定することができます。

マージンの指定には、単位付きの数値が使用できます。

ボックスの構造マージン、ボーダー、パディングなど、ボックスの構造についてザックリまとめました。...

その他には下記の指定があります。

marginプロパティは上下左右の余白を設定でき、設定方法が４つあります。

上下左右の指定

marginプロパティに値を1つだけ指定すると上下左右のマージンが共通の設定になります。

div.sample{margin: 30px;}

上下と左右の指定

marginプロパティに値を半角スペースで区切って2つ指定すると、1つ目が上下、2つ目が左右のマージン設定になります。

div.sample{margin: 20px 30px;}

上と左右と下の指定

marginプロパティに値を半角スペースで区切って3つ指定すると、1つ目が上、2つ目が左右、3つ目が下のマージン設定になります。

div.sample{margin: 20px 30px 10px;}

上、右、下、左の指定

marginプロパティに値を半角スペースで区切って4つ指定すると、1つ目が上、2つ目が右、3つ目が下、4つ目が左のマージン設定になります。

div.sample{margin: 20px 30px 10px 40px;}

パディング(padding)の設定

ボーダーの内側の余白のことをパディング(padding)といいます。
パディングは下記のプロパティで設定することができます。

マージンの指定には、単位付きの数値が使用できます。

ボックスの構造マージン、ボーダー、パディングなど、ボックスの構造についてザックリまとめました。...

その他にはパーセンテージの指定があります。

paddingプロパティは上下左右の余白を設定でき、設定方法が４つあります。

上下左右の指定

paddingプロパティに値を1つだけ指定すると上下左右のパディングが共通の設定になります。

div.sample{padding: 30px;}

上下と左右の指定

paddingプロパティに値を半角スペースで区切って2つ指定すると、1つ目が上下、2つ目が左右のパディング設定になります。

div.sample{padding: 20px 30px;}

上と左右と下の指定

paddingプロパティに値を半角スペースで区切って3つ指定すると、1つ目が上、2つ目が左右、3つ目が下のパディング設定になります。

div.sample{padding: 20px 30px 10px;}

上、右、下、左の指定

paddingプロパティに値を半角スペースで区切って4つ指定すると、1つ目が上、2つ目が右、3つ目が下、2つ目が左のパディング設定になります。

div.sample{padding: 20px 30px 10px 40px;}

余白の設定のまとめ

今回はマージンとパディングの余白の設定をまとめました。
marginプロパティ、paddingプロパティの設定を使いこなせると便利そうですね。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。