CSSリファレンス: ボックス

枠の太さ

border-top-width: 値1
border-right-width: 値2
border-bottom-width: 値3
border-left-width: 値4

値1、値2、値3、値4には以下のものが指定できます。

数値	単位付きの数値
thin	細い
medium	標準
thick	太い

border-width: 値1 値2 値3 値4

値1 値2 値3 値4は上、右、下、左を順番にまとめて指定します。値1 値2だけ指定すると上下、左右をまとめて指定に、値1だけ指定する上下左右をまとめて指定することになります。

この表記方法は、さまざまなプロパティで使われますので、必ず覚えてください。

枠のスタイル

border-top-style: 値1
border-right-style: 値2
border-bottom-style: 値3
border-left-style: 値4

値、値1、値2、値3、値4には以下のものが指定できます。

none	なし
hidden	なし
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	窪み
ridge	隆起
inset	内側全部が窪み
outset	内側全体が隆起

border-style: 値1 値2 値3 値4

値1 値2 値3 値4は上、右、下、左を順番にまとめて指定します。値1 値2だけ指定すると上下、左右をまとめて指定に、値1だけ指定する上下左右をまとめて指定することになります。

枠の色

border-top-color: 値1
border-right-color: 値2
border-bottom-color: 値3
border-left-color: 値4

値、値1、値2、値3、値4には以下のものが指定できます。

カラーネーム	色の名前で指定します。
#16進数（6桁）	#に続けて16進数値6桁を指定します。
#16進数（3桁）	6桁の2桁づつが等しい場合には3桁で省略できます。
RGB比	RGB(Red, Green, Blue)をそれぞれ%で指定します。
RGB数値	RGB(Red, Green, Blue)をそれぞれ255までの10進で指定します。

border-color: 値1 値2 値3 値4

値1 値2 値3 値4は上、右、下、左を順番にまとめて指定します。値1 値2だけ指定すると上下、左右をまとめて指定に、値1だけ指定する上下左右をまとめて指定することになります。

まとめて指定

border-top: border-top-widthの値 border-top-styleの値 border-top-colorの値
border-right: border-right-widthの値 border-right-styleの値 border-right-colorの値
border-bottom: border-bottom-widthの値 border-bottom-styleの値 border-bottom-colorの値
border-left: border-left-widthの値 border-left-styleの値 border-left-colorの値

上記のスタイルをまとめて指定できます。

上下左右が等しい場合には、さらにまとめて以下のように指定できます。

border: border-widthの値 border-styleの値 border-colorの値

枠内余白

padding-top: 値1
padding-right: 値2
padding-bottom: 値3
padding-left: 値4

値、値1、値2、値3、値4には単位付き数値を指定します。

padding: 値1 値2 値3 値4

値1 値2 値3 値4は上、右、下、左を順番にまとめて指定します。値1 値2だけ指定すると上下、左右をまとめて指定に、値1だけ指定する上下左右をまとめて指定することになります。

周辺余白

margin-top: 値1
margin-right: 値2
margin-bottom: 値3
margin-left: 値4

値、値1、値2、値3、値4には単位付き数値を指定します。

margin: 値1 値2 値3 値4

値1 値2 値3 値4は上、右、下、左を順番にまとめて指定します。値1 値2だけ指定すると上下、左右をまとめて指定に、値1だけ指定する上下左右をまとめて指定することになります。

マージンの折込

周辺余白同士が上下に隣接する場合、足した大きさになるのではなく、大きい方の大きさになります。これをマージンの折込といいます。上下に隣接する要素の下マージンと上マージン、親子の上マージン同士・下マージン同士も折込が発生します。

（参考）マージンの相殺[to-R]

幅

width: 値

値には以下のものが指定できます。

auto	標準（自動調整）
数値	単位つき数値で指定します。
%	親要素の幅に対する割合を指定します。

幅指定が行われていないものは100%の幅指定がされているものとされます。

CSS1、CSS2のルールでは、widthは内容の幅を表すため、枠の幅は'width'+'padding-left'+'padding-right'+'border-left-width'+'border-right-width'で計算されます。しかし、古いブラウザや動作モードを持つブラウザ（IE6やOpera）の後方互換モードでは、widthはpaddingとborderを含んだ大きさで解釈されます。動作モードを持つブラウザならばDTDを記述することで回避することができます。

ボックス概念図2

高さ

height: 値

値には以下のものが指定できます。

auto	標準（自動調整）
数値	単位つき数値で指定します。
%	親要素に対する割合を指定します。

heightを指定した場合、文字は上詰めで表示されます。

インライン要素の高さはline-heightによって決まります。

CSS1、CSS2のルールでは、heightは内容の高さを表すため、枠を含めた高さは'height'+'padding-top'+'padding-bottom'+'border-top-width'+'border-bottom-width'で計算されます。しかし、古いブラウザや動作モードを持つブラウザ（IE6やOpera）の後方互換モードでは、heightはpaddingとborderを含んだ大きさを表します。動作モードを持つブラウザならばDTDを記述することで回避することができます。

最大幅

max-width: 値

値には以下のものが指定できます。

数値	単位つき数値で指定します。
%	親要素に対する割合を指定します。

IE6ではサポートされていません。

最小幅

min-width: 値

値には以下のものが指定できます。

数値	単位つき数値で指定します。
%	親要素に対する割合を指定します。

IE6ではサポートされていません。

最大高さ

max-height: 値

値には以下のものが指定できます。

数値	単位つき数値で指定します。
%	親要素に対する割合を指定します。

IE6ではサポートされていません。

最小高さ

min-height: 値

値には以下のものが指定できます。

数値	単位つき数値で指定します。
%	親要素に対する割合を指定します。

IE6ではサポートされていません。