枠の内側にスペースをおく
枠の背景に色を塗るや枠の周りに枠線を引くを使用した場合、枠と文字の近さが気になったりしないでしょうか?
ぴったりとくっついている状態だと文字は良く見えないし…実際、そのままだとデザイン的によろしくない事が多々あります。
そういう時は、「paddig」設定で、枠の内側に空間を作りましょう。
<div>文字の内側に空間</div>
※このサンプルは、分かりやすいように、背景に色をつけています。
上の例の場合は、上と右は空間0、下に2pxの空間、左に5pxの空間があきます。
div{
padding:5px;
}
文字の周りに空間ができると大変読みやすいです。
※このサンプルは、分かりやすいように、背景に色をつけています。
「padding」だと、上下左右に空間が出来ます。
もしも、どこか一部のみ空間を作りたい場合は、「padding-top」「padding-right」「padding-bottom」「padding-left」として設定してください。
■さらに便利な方法
div{
※左から、上、右、下、左の空間を設定できます。padding:0 0 2px 5px;
}
上の例の場合は、上と右は空間0、下に2pxの空間、左に5pxの空間があきます。