Home > CSS > CSSの基礎2　ボックスモデルについて

CSSの基礎2　ボックスモデルについて

Posted by: nboze
2010年1月11日 23:22
CSS

1）ボーダー・マージン・パディング・内容領域に関して

内容領域：テキストや画像などの要素自体が持つ領域（つまり生の文字ってことかなぁ）
ボーダー：基準になる線
マージン：ボーダーから外側の余白
パディング：ボーダーから内側の内容領域までの余白

2）指定したボックスのwidthに関して。

指定したボックスの
内容領域widthが500pxで
左右のパディングが5px
左右のボーダーが5px
左右のマージンが10pxとした場合

500+5×2+5×2+10×2=540px

540pxがそのボックスモデルの幅となる。
指定するwidthとは実質内容領域の幅を指している事になる。

しかしIE5.5以前とIE6や7の後方互換モードでは
このwidthの扱いが違い
width=内容領域＋左右パディング＋左右ボーダー幅となり

先の例でのwidth500pxと指定した場合は
内容領域が

500-5×2-5×2=480px

となってしまう。

つまり目的としているボックスモデルの幅がこの例でいくと本来は540pxだが
モダンブラウザでは520pxになってしまい、
内容領域が500pxが480pxとなってしまう。

今回は幅に関して説明したがこれは高さでも同じ扱いになるので注意が必要である。

Comments:0

Trackbacks:0

TrackBack URL for this entry: http://nboze.com/mt/mt-tb.cgi/38
Listed below are links to weblogs that reference: CSSの基礎2　ボックスモデルについて from nBoze.com

Home > CSS > CSSの基礎2　ボックスモデルについて

Tag Cloud

Calendar

Search