HTML文書の要素は、ボックス(box)として扱われます。このため、デザイン担当のCSSは、要素をボックスモデル(Box Model)で表現します。
ボックス要素
ボックスの中心は内容＝コンテンツ（content）です。
ボックスの構造
コンテンツを中心に４層のボックスで取り囲むように作られています。
margin
border
padding
content ↑
height
← width ↓ →
content
contentは、文章や画像、写真などの内容を収めた中心となるボックスです。高さと幅があり、widthプロパティやheightプロパティによって大きさを指定することができます。
width
width: [長さ]; 要素の横幅を長さで指定します。
height
height: [長さ]; 要素の高さを長さで指定します。
padding
contentを取り囲む余白のボックスです。contentを家だとすると家の周りの庭や駐車場などの外構部分に当たります。contentの敷地内ですから、contentの支配下です。
paddingプロパティで幅を指定することができます。
backgroundプロパティで飾り付けを行えるのは、ここまでとなります。
padding
padding: [値]; ４方向の空き具合を長さで指定します。
値 １つ：４方向同じ幅
２つ：上下同じ幅、左右同じ幅
３つ：上、左右、下の幅
４つ：上、右、下、左の幅
border
縁の部分です。家で例えるならば、塀にあたります。
初期設定は０ですが、枠を表示する場合にはborderプロパティで設定します。
margin
ボーダーの外の余白です。家に例えるならば、隣の家との境目の共有スペース、家と家との間の空き地です。
marginプロパティで幅を指定することができます。
注意
縦に要素が重なった場合、marginは広い方に吸収されて表示されます。
margin
margin: [値]; ４方向の空き具合を長さで指定します。
値 １つ：４方向同じ幅
２つ：上下同じ幅、左右同じ幅
３つ：上、左右、下の幅
４つ：上、右、下、左の幅
※ 負の値も設定できます。
block-level要素
<div>,<p>,<h1>など、構造化要素で、自動的に改行され縦並びとなります。ページ幅いっぱいに表示されます。ボックスの大きさを変更することが可能です。
<div class="block">A</div>
<div class="block">B</div>
.block {
width: 64px;
height: 24px;
color: #d86;
background: #fffaf8;
}
A
inline要素
<span>,<a>,<img>など、内容そのものの表示用で、最低限のボックス構造しか持たず、大きさを変更できません。自動改行は行なわれず、ぞろぞろと行の終わりまで横並びに表示されます。
<span class="block">A</span>
<span class="block">B</span>
class属性をCSSで与えても、形状や改行は反映しないことが分かります。
inline－block
block要素とinline要素の特徴を display プロパティにより与えた要素です。
<span class="inline-block">A</span>
<span class="inline-block">B</span>
.inline-block {
display: inline-block;
width: 64px;
height: 24px;
color: #d86;
background: #fffaf8;
}
ボックス形状を持った要素を横に並べることができるようになります。