ボックスモデル
全てのHTML要素は、CSSで「ボックス」と呼ばれる「四角い領域」として扱われる。
content (コンテンツ領域)に、テキストや画像などの要素の内容が表示される。
ボックスモデルの構成要素
その内側から、padding (パディング)、border (境界線)、margin (マージン)と外側へ領域を持つ。
- コンテンツ領域(width, height プロパティ)
- padding (内側の余白)
- border (ボーダー)
- margin (外側の余白)
width, height プロパティで指定できるプロパティは、コンテンツ領域を指定できるプロパティであって、ボックス全体の横幅や高さを指定できるプロパティではないことに、注意。
ブラックボックスの前後は改行され、上から下へ配置される。
width,height,上下左右の margin, padding が指定できる。
インラインボックスは、改行は入らず、左から右に横方向に配置される。
基本的に、width,height,上下の margin は指定できない。
border の内側に、background-color により、背景色を付けることが出来る。
背景色が付くのは、width,height,padding までの領域で、margin の領域には背景は付かない。
border (境界線)には、太さ、線種、色を指定できる。
width,height は、コンテンツ領域を設定し、border,padding が存在する場合は、見た目の幅と width,height が一致しない。
ボックスサイズの計算
ボックスサイズの計算は、レイアウトを組む際の基本となる。
ボックスサイズの計算方法
レイアウトなどで計算する場合、
- padding:要素の中の余白
- margin:要素の外の余白
と把握すれば、イメージしやすい。
ボックス全体の横幅
ボックス全体の横幅 = コンテンツ領域の横幅 width + 左右のマージンの幅 + 左右のパディングの幅 + 左右のボーダーの太さ
ボックス全体の高さ
ボックス全体の高さ = コンテンツ領域の高さ + 上下のマージンの幅 + 上下のパディングの幅 + ボーダーの太さ
レイアウトを組む場合、正しく計算し、width を割り出さないと、カラム落ちが起きてしまう。
padding と margin プロパティ
padding と margin ともに、-top,-left などを付けて、個別に指定することもできるが、
padding: 100px;
とすると、上下左右、一挙に100px に指定できる。
margin: 0 auto;
と指定すると、要素を中央に配置させることが出来る。
marginのautoを指定する時は、widthを合わせて指定する必要があります。
なお、上下のmarginにautoを指定することはできません。
同様に、
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構造上、入れ子になっている要素も、やはり、マージンは相殺される。
隣り合う別の要素との間隔を設定する場合 → margin
を使う。