ボックスモデル (マージン、パッディング、ボーダー)

マージン

margin

margin-top、 margin-right、 margin-bottom および margin-left を一度に指定できる簡略化プロパティです。

値を四つ指定した場合は、それぞれ、上、右、下、左のマージンに適用されます。
値を三つ指定した場合は、それぞれ、上、左右、下のマージンに適用されます。
値を二つ指定した場合は、それぞれ、上下、左右のマージンに適用されます。
値を一つ指定した場合は、上下左右すべてのマージンに適用されます。

p { margin: 20px }
p { margin: 2em 10% 3em 10% }

margin-top
margin-right
margin-bottom
margin-left

ボックスの上下左右のマージンを指定します。

長さ

マージンを長さで指定します。負の値も可能です。

パーセント値

マージンを親要素の横幅に対する割合で指定します。負の値も可能です。
margin-top、margin-bottom などの垂直方向のマージンも親要素の横幅を参照することに注意してください。

auto

インライン要素の場合は、0 と同じになります。
ブロック要素の横方向のマージンとして指定した場合は、 コンテナブロックの横幅から要素の横幅を引いた値に反対側のマージン幅を足した値になります。 margin-left と margin-right の両方に auto を指定した場合は、 コンテナブロックの横幅から要素の横幅を引いた値の半分がそれぞれ割り当てられます。 つまり、要素は中央に表示されます。

p { margin-left: 10%; margin-right: 40px; }
p { width: 300px; margin-left: auto; margin-right: 40px; }
p { width: 300px; margin-left: auto; margin-right: auto; } 要素は、中央に表示される

パッディング

padding

padding-top、 padding-right、 padding-bottom および padding-left を一度に指定できる簡略化プロパティです。

値を四つ指定した場合は、それぞれ、上、右、下、左のパッディングに適用されます。
値を三つ指定した場合は、それぞれ、上、左右、下のパッディングに適用されます。
値を二つ指定した場合は、それぞれ、上下、左右のパッディングに適用されます。
値を一つ指定した場合は、上下左右すべてのパッディングに適用されます。

p { padding: 20px }
p { padding: 2em 10% 3em 10% }

padding-top
padding-right
padding-bottom
padding-left

ボックスの上下左右のパッディングを指定します。

長さ

パッディングを長さで指定します。

パーセント値

パッディングを親要素の横幅に対する割合で指定します。
padding-top、padding-bottom などの垂直方向のパッディングも親要素の横幅を参照することに注意してください。

p { padding-top: 1.2em }

ボーダー

border

border-width、border-style および border-color を一度に指定できる簡略化プロパティです。

border-top
border-right
border-bottom
border-left

ボックスの上下左右のボーダーのスタイル、幅、色を指定します。

border-width

ボックスのボーダーの幅を指定します。

値を四つ指定した場合は、それぞれ、上、右、下、左のボーダーに適用されます。
値を三つ指定した場合は、それぞれ、上、左右、下のボーダーに適用されます。
値を二つ指定した場合は、それぞれ、上下、左右のボーダーに適用されます。
値を一つ指定した場合は、上下左右すべてのボーダーに適用されます。

border-top-width
border-right-width
border-bottom-width
border-left-width

ボックスの上下左右のボーダーの幅を指定します。

thin

細いボーダーです。

mediam

通常のボーダーです。

thick

太いボーダーです。

長さ

ボーダーの幅を長さで指定します。負の値は指定できません。

thin 、mediam 、thick の実際の太さは UA 依存です。

border-style

ボックスのボーダーのスタイルを指定します。

値を四つ指定した場合は、それぞれ、上、右、下、左のボーダーに適用されます。
値を三つ指定した場合は、それぞれ、上、左右、下のボーダーに適用されます。
値を二つ指定した場合は、それぞれ、上下、左右のボーダーに適用されます。
値を一つ指定した場合は、上下左右すべてのボーダーに適用されます。

border-top-style
border-right-style
border-bottom-style
border-left-style

ボックスの上下左右のボーダーのスタイルを指定します。

none

ボーダーを表示しません。この値を指定するとボーダーの幅が 0 になります。

hidden

none とほぼ同じですが、結合テーブルモデル時にのみ、意味が変わります。

dotted

点線です。

dashed

破線です。

solid

切れ目のない実線です。

double

二重線です。

groove

くぼみで表示されます。

ridge

隆起で表示されます。

inset

ボックスの内側がくぼんだように表示されます。

outset

ボックスの内側が浮き出たように表示されます。

border-color

ボックスのボーダーの色を指定します。

値を四つ指定した場合は、それぞれ、上、右、下、左のボーダーに適用されます。
値を三つ指定した場合は、それぞれ、上、左右、下のボーダーに適用されます。
値を二つ指定した場合は、それぞれ、上下、左右のボーダーに適用されます。
値を一つ指定した場合は、上下左右すべてのボーダーに適用されます。

border-top-color
border-right-color
border-bottom-color
border-left-color

ボックスの上下左右のボーダーの色を指定します。

transparent

透明です。ただしボーダー幅は存在します。

色

色を指定します。