スポンサーリンク

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

ボックスモデル

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

content (コンテンツ領域)に、テキストや画像などの要素の内容が表示される。ボックスモデル

 

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

ブラックボックスの前後は改行され、上から下へ配置される。
width,height,上下左右の margin, padding が指定できる。

インラインボックスは、改行は入らず、左から右に横方向に配置される。
基本的に、width,height,上下の margin は指定できない。

border の内側に、background-color により、背景色を付けることが出来る。

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構造上、入れ子になっている要素も、やはり、マージンは相殺される。

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

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

を使う。

【関連記事】

[ CSS ] ボックス関係のプロパティ | KI-Web Design

 【参照】

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

スポンサーリンク

コメントを残す