箱と余白の位置関係

箱を並べるのに、というか箱を扱うのに、marginpaddingの設定は重要です。

さて、marginとpaddingとは何でしょうか。marginは「余白」、paddingは「詰め物」とかいう意味なのですが……。

赤い背景の箱を用意しました。その周りの点線は実際には表示されない線です。marginの指すエリアを表しています。 要するに、marginは箱の外の余白です。たっぷりと余白をとればとるほど、他の箱との距離が離れていきます。
図にはmarginの他にpaddingも書いてあります。paddingは箱の内側の「背景が敷かれているが内容物が入ってこない」エリアです。

箱と箱の間にちょうどいい間隔を作る時はmarginを、
箱の隅にまで文字や画像やその他もろもろのモノがつめこまれないようにする時はpaddingを、
それぞれ定めればいいわけです。

まずはpaddingから

paddingの「背景の上に中身が乗らない」という性質を利用して、背景画像に文字が被らないようにするという設定をすることもできます。
枠と背景を付けてみようでは箱の背景として1枚絵を設定しましたが、実はあのままではよくないのです。

サンプル
たいへんだああああああああああああああああああ!文字が背景画像のイラストにかぶっちゃうよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお!

初期状態では箱の中身(この例では文章)を上下左右隅々まで詰め込んでしまうので、背景画像が描いてあるところにまで文字が入ってしまいました。
そういうデザインならいいのですが、黒文字に黒いイラスト、文字が被ってはよくないですね。こういう時はpadding-rightをたっぷりとるのが手っ取り早いでしょう。右端に文字が入れないエリアを作ってやればよいわけです。ついでに、上・左・下も文字が枠線に対して文字が近すぎるので少し設定しましょう。

.flowerbox{
	padding-top:10px;
	padding-right:180px;
	padding-bottom:10px;
	padding-left:20px;
	min-height:154px;
	border:1px dashed #000000;
	background-color:#fcfefc;
	background-image:url(hana3-400x360.gif);
	background-repeat:no-repeat;
	background-position:bottom right;
}
たいへんだああああああああああああああああああ!文字が背景画像のイラストにかぶっちゃうよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお!
サンプル
たいへんだああああああああああああああああああ!文字が背景画像のイラストにかぶっちゃうよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお!

paddingは、上をpadding-topが、右をpadding-rightが、下をpadding-bottomが、左をpadding-leftが担当しています。
勿論まとめて書くことが出来て、その時はpadding:上 右 下 左;と、右回りの順で上からたどって長さを書いていきます。
もしも上と下、左と右で同じ数字の時は、padding:上下 左右;と書くこともできます。
左右だけが同じ場合はpadding:上 左右 下;になります。
1つだけ書くと四方向すべてに反映されます。

margin

marginも書き方は同じです。このくらい箱と箱を離したいなあ、というのを計算しながら決めてください。
ただし距離関係には要注意。

図のように2つの箱が並んで接している所に両方ともmarginが設定されている場合は、長い方が採用されます。
たとえば
青い箱「ぼくは下に最低でも30pxの余白が欲しい!」
赤い箱「わたしは上に最低でも20pxの余白があれば十分!」
とかなった場合は30pxが採用されるわけです。

それから、箱にはmargin:適当な数字 auto;という大事なものがいるので説明しておきましょう。多分見た方が分かると思うのでサンプルから。

.boxauto{
	margin:10px auto; /*上下に10pxのマージン、左右はauto*/
	width:200px;
	height:100px;
	border:1px solid #000000;
}
.box10{
	margin:10px; /*上下左右に10pxのマージン*/
	width:200px;
	height:100px;
	border:1px solid #000000;
}
auto設定だよ
10px設定だよ
サンプル
auto設定だよ
10px設定だよ

そうです、左右にauto設定をすると箱が中央に配置されるんです。ものは基本的に中央にあった方がみやすいですよね。
ちなみに先ほどの2つの箱のマージン、この例でいうと、autoの箱は下に10pxの余白が欲しくて、10pxの箱は上に10pxの余白が欲しいので、結局2つの箱の間の距離は10pxとなっています。

1つ注意してほしいのは、
箱を中央に置くのはmarginのautoで、
テキストの中央揃えはtext-align:center;というやつなので、
注意してくださいね。担当の部署が違いますヨ。