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

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

枠の背景に色を塗る枠の周りに枠線を引くを使用して、せっかく別のものと分離させても、上下の情報とぴったりくっついていると、結局見づらかったりします。

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


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

margin:5px;

}


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

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

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


■さらに便利な方法

div{

margin:0 0 2px 5px;

}

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

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

Akasa Rira
みつけたきせき