Section 8 : 枠とパディング

スタイルシートでは，文字単位でも段落単位でもあらゆる要素に枠を付けることは出来る。プレゼンテーションにはうってつけの機能だが，枠ばっかりでも品がない。

枠

枠の太さを決めるのが border-width，二重線やら溝やらを指定するのが border-style で，双方をセットにして使う。それでは細い線から順にいろいろな枠を作ってみよう。ここでは，枠指定の省略形を使ってみる。

{ border: 太さ スタイル 色; }

枠の太さには，細い（thin），普通（medium），太い（thick）があり，スタイルは以下の例のようにたくさんある。

<P STYLE="border: thin solid silver;">thin：細い solid：実線</P>
<P STYLE="border: thick solid silver;">thick:太い solid：実線</P>
<P STYLE="border: thick double silver;">double：二重線</P>
<P STYLE="border: thick groove silver;">groove：溝のような線</P>
<P STYLE="border: thick inset silver;"inset：要素が下になる</P>

小粋な枠がいろいろできる。

その他にも，盛り上がった感じの ridge，要素が上になるような outset などがある。枠についての詳細は Step forward CSS の Section 9 および Section 10 を参照されたい。

 IE3  残念ながら，枠を使うことはできない。

パディング

文字などの要素と枠との間にできる周辺余裕を制御するのがパディングである。そういえば <TABLE> の属性に CELLPADDING というのがあったが，これと似ている。

<P STYLE="border: medium outset silver; padding: 3pt;">padding: 3pt</P>
<P STYLE="border: medium outset silver; padding: 10pt;">padding: 10pt</P>

これらを組み合わせることで，華麗なページを創作できるだろう。

border や padding は４辺の枠線や周辺余裕を別々に指定することができ，また上の例のように省略形も存在する。パディングについての詳しい解説は Step forward CSS の Section 11 を参照されたい。

 IE3  残念ながら，パディングを使うことはできない。

解決！ センター化学 I ◆ Z 会出版