資料一覧へ

ブロック（インライン）の余白を数値で指定する−margin、padding

「行頭を揃えた中央揃・右揃え」へ 

marginはタグを指定した範囲の外側に、
paddingはタグを指定した範囲の内側に余白がつきます。

以下の指定の記述例はこちら。また余白指定の詳細はこちら。

ブロック・インラインを問わず、どの要素でも余白を指定できますが、例としてp（段落・ブロック要素）に背景色をつけていきます。

<p>にmarginで50ピクセルの余白をつけた例

余白の位置をわかりやすくするため、背景に色をつけていますが、実際にはmarginを指定しただけでは、背景色はつきません。

段落の領域の外側に余白ができます。

なお、インライン要素にmarginを指定した場合、他の行（またはブロック）との間隔は変わりません。

<strong>(インライン要素)に15ピクセルのmarginを指定した例

この例の場合、<br>で改行した行とインライン要素にmarginを付けた行の行間はこう↓なります。
余白をわかりやすくするため、背景に色をつけていますが、実際にはmarginを指定しただけでは、背景色はつきません。
インライン要素にmarginを付けた行を<br>で改行すると、次の行との行間はこう↑なります。

<p>にpaddingで50ピクセルの余白をつけた例

余白の位置をわかりやすくするため、背景に色をつけていますが、実際にはpaddingを指定しただけでは、背景色はつきません。

段落の領域の内側に余白ができます。

インライン要素にpaddingをつけるとブロック要素と同様に上下左右に余白ができますが、他の行（またはブロック）との間隔は変わりません。

<strong>(インライン要素)に15ピクセルのpaddingを指定した例

インライン要素にpaddingを付けた場合、<br>で改行された前の行との行間はこうなります。余白とともに背景色をつけたので、余白と重なる前の行は隠れてしまいます。
行のサンプルです。行のサンプルです。行のサンプルです。行のサンプルです。行のサンプルです。
余白をわかりやすくするため、背景に色をつけていますが、実際にはpaddingを指定しただけでは、背景色はつきません。
<br>で改行すると、次の行との行間はこうなります。余白とともに背景に指定した色は、次の行の下に隠れます。

CSSとタグの記述例−margin

<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>CSSでブロックを修飾</title>

<STYLE type="text/css">
<!--
p {
margin: 50px;
}
-->
</STYLE>

 　←CSSの指定開始
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始
　←pへのCSS指定開始。stongに付ける場合は、p{　の代わりにstrong{　となります。
　←外側の余白を数値で指定。例は50ピクセル。
　←pへのCSS指定終了
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ
　←CSSの指定終了
</head>

<body>
<p>段落の領域の外側に余白ができます。</p>
</body>

CSSとタグの記述例−padding

<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>CSSでブロックを修飾</title>

<STYLE type="text/css">
<!--
p { 
padding: 50px;   
} 
-->
</STYLE>

 　←CSSの指定開始
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始
　←pへのCSS指定開始
　←内側の余白を数値で指定。例は50ピクセル。
　←pへのCSS指定終了
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ
　←CSSの指定終了
</head>

<body>
<p>段落の領域の内側に余白ができます。</p>
</body>

margin、paddingの詳細指定

上下左右の余白を個別に指定する

上の例ではmargin,paddingともに１つの数字で上下左右の余白を指定していましたが、異なる数値を指定することもできます。

指定例

数値の記述方法で上下左右の余白を区別
指定対象css内容
すべての余白margin: 20px;上下左右に20ピクセルのマージン/パディング
padding: 20px;
上下／左右margin: 20px 40px;上下に20ピクセル、左右に40ピクセルのマージン/パディング
padding: 20px 40px;
上／左右／下margin: 20px 40px 60px;上に20ピクセル、左右に40ピクセル、下に60ピクセルのマージン/パディング
padding: 20px 40px 60px;
上／右／下／左margin: 20px 40px 60px 80px;上に20ピクセル、右に40ピクセル、下に60ピクセル、左に80ピクセルのマージン/パディング
padding: 20px 40px 60px 80px;

この方法では、どの指定方式でも全ての余白に対して数値が指定されます。

上下左右の余白を単独で指定する
指定対象css内容
上margin-top: 20px;上方向のみに20ピクセルのマージン/パディング
padding-top: 20px;
下margin-bottom: 20px;下方向のみに20ピクセルのマージン/パディング
padding-bottom: 20px;
左margin-left: 20px;左方向のみに20ピクセルのマージン/パディング
padding-left: 20px;
右margin-right: 20px;右方向のみに20ピクセルのマージン/パディング
padding-right: 20px;

この方法では、一方向の余白にのみ数値が指定されます。複数の方向で余白の数値を指定したい場合は、それぞれの方向の宣言を指定します。