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

HTML

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

余白について

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

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

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

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

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

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

PADDING

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

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

padding 使用例1

<記述例>

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

<表示例>

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

padding 個別指定

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

・padding-top(上の指定)
・padding-bottom(下の指定)
・padding-left(左の指定)
・padding-right(右の指定)

padding 使用例2

<記述例>

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

<表示例>

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

MARGIN

●margin(外側の余白)

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

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

margin 使用例1

<記述例>

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

<表示例>

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

margin 個別指定

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

・margin-top(上の指定)
・margin-bottom(下の指定)
・margin-left(左の指定)
・margin-right(右の指定)

margin 使用例2

<記述例>

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

<表示例>

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

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

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

コメント

タイトルとURLをコピーしました