CSS: ボックスモデル

ほぼすべての(HTML)要素はボックス型の属性を持ちます。

			margin (透明)
			border
			padding
			content

余白 (margin): margin-top: <length> | <percentage>;; margin-right: <length> | <percentage>;; margin-bottom: <length> | <percentage>;; margin-left: <length> | <percentage>;; または; margin: <top> <right> <bottom> <left>;; ※余白は常に透明
境界枠 (border): 幅や枠の種類が指定できます。
中身と枠の間 (padding): padding-top: <length> | <percentage>;; padding-right: <length> | <percentage>;; padding-bottom: <length> | <percentage>;; padding-left: <length> | <percentage>;; または; padding: <top> <right> <bottom> <left>;

                           --------------- <-- top
                             top margin
                           ---------------
                             top border
                           ---------------
                            top padding
                           +-------------+ <-- inner top
|        |        |        |             |         |         |         |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding|             | padding | border  | margin  |
|        |        |        |             |         |         |         |
                           +-------------+ <-- inner bottom
^                          ^             ^                             ^
left         left inner edge             right inner edge          right
outer                                                              outer
edge                        bottom padding                          edge
                           ---------------
                             bottom border
                           ---------------
                             bottom margin
                           --------------- <-- bottom

ボックスの中央揃え

ボックス自体を中央に配置したい場合は、左右の margin を auto とします。ただし、これは IE6 では有効ではありません。

CSS によるブロック要素の左右中央揃え (参考)

例

table {

margin-left: auto;
margin-right: auto;

}