2009年8月30日日曜日

ボックスと線種

要素は、マージン、ボーダー、パディング、コンテンツ領域の4つの部分からなります。注意すべきは、widthとはコンテンツ領域の幅のことであって、 マージン、ボーダー、パディングは含まれないことです。このwidthの定義は誤解を生み、値の算出を複雑にしています。背景(壁紙)はマージンには適用 されません、ボーダーには適用されます。


marginやpaddingには、異なった数値を指定することができます。4つ指定した場合は、時計回りとなります。

margin paddingへの数値の指定
指定の数値
margin, padding: 10px 10px 10px 10px 10px
margin, padding: 10px 20px 10px 20px 10px 20px
margin, padding: 10px 20px 30px 10px 20px 30px 20px
margin, padding: 10px 20px 30px 40px 10px 20px 30px 40px

一般にbody要素、h要素、p要素のマージンはブラウザのデフォルト値が設定されています。ボーダーでは色、太さ、線種を指定します。デフォルト値では線種が「none」となっているので、線を表示するには次のように線種を指定することになります。

線種の指定
線種のプロパティ 意味
solid 実線
double 二重線
dotted 点線
dushed 破線
inset 立体凹効果
outset 立体凸効果
groove 枠線の立体凹効果
ridge 枠線の立体凸効果