ウェブサイト作りでの余白設定をCSSで！

今回は、文字や枠線の余白を設定する
スタイルシートについて紹介します。

余白には、文字と枠線（border）との余白（内側の余白）と
枠線の外側の余白とがあります。

内側の余白は、padding（パディング）で設定します。

外側の余白は、margin（マージン）で設定します。

この余白設定（margin,padding）は、
ブロックレベル要素とインライン要素とでは
表示に違いがあります。

また、ウェブブラウザによって表示が異なることもあります。

この点は実際にテスト表示して確認しながら
設定しましょう。

例：padding: 値;
値：px、rem、% などで指定

値が1つの場合：[上下左右]
値が2つの場合：記述順に[上下][左右]
値が3つの場合：記述順に[上][左右][下]
値が4つの場合：記述順に[上][右][下][左]

＜記述例＞

<p style="padding:10px 20px;background-color:pink;border:solid navy 1px;">
  上下に10px、左右に20pxの内側余白を設定
</p>

＜表示例＞

上下に10px、左右に20pxの内側余白を設定

また、上下左右を個別指定するには、
以下の通り設定します。

・padding-top（上の指定）
・padding-bottom（下の指定）
・padding-left（左の指定）
・padding-right（右の指定）

＜記述例＞

<p style="padding-left:20px;background-color:pink;border:solid navy 1px;">
  左に20pxの内側余白を設定
</p>

＜表示例＞

左に20pxの内側余白を設定

●margin（外側の余白）

例：margin: 値;
値：px、rem、% などで指定

値が1つの場合：[上下左右]
値が2つの場合：記述順に[上下][左右]
値が3つの場合：記述順に[上][左右][下]
値が4つの場合：記述順に[上][右][下][左]

＜記述例＞

<p style="margin:20px 20px 30px;background-color:pink;border:solid navy 1px;">
  上左右に20px、下に30pxの外側余白を設定
</p>

＜表示例＞

上左右に20px、下に30pxの外側余白を設定

また、上下左右を個別指定するには、以下の設定ができます。

・margin-top（上の指定）
・margin-bottom（下の指定）
・margin-left（左の指定）
・margin-right（右の指定）

＜記述例＞

<p style="margin-top:0;margin-bottom:50px;background-color:pink;border:solid navy 1px;">
  上の余白をなくし、下に50pxの外側余白を設定
</p>

＜表示例＞

上の余白をなくし、下に50pxの外側余白を設定

ちなみに、margin は負の値を指定できますが、
padding は負の値を指定できません。

これで、余白のスタイルシート設定方法が
分かったのではないでしょうか。