今回は、文字や枠線の余白を設定する
スタイルシートについて紹介します。
余白について
余白には、文字と枠線(border)との余白(内側の余白)と
枠線の外側の余白とがあります。
内側の余白は、padding(パディング)で設定します。
外側の余白は、margin(マージン)で設定します。
この余白設定(margin,padding)は、
ブロックレベル要素とインライン要素とでは
表示に違いがあります。
また、ウェブブラウザによって表示が異なることもあります。
この点は実際にテスト表示して確認しながら
設定しましょう。
PADDING
例:padding: 値;
値:px、rem、% などで指定
値が1つの場合:[上下左右]
値が2つの場合:記述順に[上下][左右]
値が3つの場合:記述順に[上][左右][下]
値が4つの場合:記述順に[上][右][下][左]
値: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-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つの場合:記述順に[上][右][下][左]
値: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-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 は負の値を指定できません。
これで、余白のスタイルシート設定方法が
分かったのではないでしょうか。
コメント