枠の外側にスペースをおく
枠の背景に色を塗るや枠の周りに枠線を引くを使用して、せっかく別のものと分離させても、上下の情報とぴったりくっついていると、結局見づらかったりします。
そういう時は、「margin」設定で、枠の外側に空間を作りましょう。
<div>文字の外側に空間</div>
※このサンプルは、分かりやすいように、背景に色をつけています。
上の例の場合は、上と右は空間0、下に2pxの空間、左に5pxの空間があきます。
div{
margin:5px;
}
文字の周りに空間ができると大変読みやすいです。
※このサンプルは、分かりやすいように、背景に色をつけています。
「margin」だと、上下左右に空間が出来ます。
もしも、どこか一部のみ空間を作りたい場合は、「margin-top」「margin-right」「margin-bottom」「margin-left」として設定してください。
■さらに便利な方法
div{
※左から、上、右、下、左の空間を設定できます。margin:0 0 2px 5px;
}
上の例の場合は、上と右は空間0、下に2pxの空間、左に5pxの空間があきます。