Topスタイルシートの基本枠と枠線 > 枠の内側にスペースをおく

枠の内側にスペースをおく

枠の背景に色を塗る枠の周りに枠線を引くを使用した場合、枠と文字の近さが気になったりしないでしょうか?
ぴったりとくっついている状態だと文字は良く見えないし…実際、そのままだとデザイン的によろしくない事が多々あります。

そういう時は、「paddig」設定で、枠の内側に空間を作りましょう。


<div>文字の内側に空間</div>
div{

padding:5px;

}


文字の周りに空間ができると大変読みやすいです。

※このサンプルは、分かりやすいように、背景に色をつけています。

「padding」だと、上下左右に空間が出来ます。
もしも、どこか一部のみ空間を作りたい場合は、「padding-top」「padding-right」「padding-bottom」「padding-left」として設定してください。


■さらに便利な方法

div{

padding:0 0 2px 5px;

}

※左から、上、右、下、左の空間を設定できます。
上の例の場合は、上と右は空間0、下に2pxの空間、左に5pxの空間があきます。

「枠の内側にスペースをおく」関連本

Akasa Rira
みつけたきせき