CSS:間隔

要素間の隙間のイメージは、以下のようになります。
これらの設定により、
空白文字や改行だけよりも、
もっと細かなレイアウトが可能になります。

●border

要素の外周です。実線や破線を書いたり、線の太さを指定したりできます。
# 詳細は、罫線で説明します。

●margin

他の要素との隙間の設定です。
隙間には、上、左、右、下、の4か所あるので、
それぞれ設定する事ができます。
{margin: 値} => 上・左・右・下それぞれ同じ値に。
{margin: 値1 値2} => 上・下が[値1]、左・右が[値2] に。
{margin: 値1 値2 値3} => 上が[値1]、左・右が[値2]、下が[値3]に。
{margin: 値1 値2 値3 値4} => 上、右、下、左が、それぞれの値に。

また、
margin-top、margin-bottom、margin-left、margin-right
を使って、上下左右、別々に margin を設定する事もできます。

値は、文字のサイズと同様、px, em などが使えます。

●padding

border と、実際に描画される要素の隙間の設定です。

値の設定の仕方は、margin と同様です。

padding-top、padding-bottom、padding-left、padding-right
もあります。