Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

 

ボックスモデル

全てのHTML要素は、CSSで「ボックス」と呼ばれる「四角い領域」として扱われる。

ボックスモデル

 

内側から、padding (パディング)、border (罫線)、margin (マージン)と外側へ領域を持つ。

border の内側には、背景色を付けることが出来る。

width,height は、コンテンツ領域を設定し、border,padding が存在する場合は、見た目の幅と width,height が一致しない。

レイアウトを組む場合、正しく計算し、width を割り出さないと、カラム落ちが起きてしまう。

padding と margin プロパティ

padding と margin ともに、-top,-left などを付けて、個別に指定することもできるが、

padding: 100px;

とすると、上下左右、一挙に100px に指定できる。

同様に、

padding,margin:100px; 100px(上下左右)
padding,margin:100px 50px; 100px (上下) 50px (左右)
padding,margin:100px 50px 30px; 100px (上) 50px(左右)  30px (下)
padding,margin:100px 50px 30px 20px; 100px (上) 50px (右) 30px (下) 20px (左)

 

最後の上下左右を個別に指定する方法は、時計回りに順に指定していると覚えるとよい。

初期マージン

文字要素には、ブラウザ初期値として上下マージンが設定されている。

p { margin: 1em 0; }

h1 { margin: 0.67em 0; }

h2 { margin: 0.83em 0; }

h3 { margin: 1em 0; }

h4 { margin: 1.33em 0; }

em が、文字サイズに対する相対値であることに注意。

上下マージンの相殺

隣り合う要素、入れ子になっている要素の上下マージンは、相殺される。

例)BOX1の下マージンが10px、BOX2の上マージンが20pxの場合、10+20=30px とはならず、BOX2の20px が採用される。

マージンの相殺

HTML構造上、入れ子になっている要素も、やはり、マージンは相殺される。

マージンの相殺2要素の内側の余白を設定する場合 → padding

隣り合う別の要素との間隔を設定する場合 → margin

を使う。

Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

コメントを残す