このページの目次
「ブロックボックス」と「インラインボックス」
body要素の中で使用される要素の多くは、HTML5以前にはボックスの表示特性によって「ブロックレベル要素（Block-Level Elements）」と「インライン要素（Inline Elements）」に分類されていました。
HTML5ではブロックレベル要素とインライン要素という分類の考え方はなくなり、正しい文章構造の表現のために、HTMLタグは「コンテンツカテゴリ」という考え方で分類されるようになりました。
しかし、ブロックレベル要素とインライン要素の分類はなくなりはしましたが、HTMLタグは属するカテゴリによって、ブロックレベル要素とインライン要素のどちらかの表示特性を持っています。ブロックレベル要素として表示されるボックスを「ブロックボックス（block box）」、インライン要素として表示されるボックスを「インラインボックス（inline box）」といいます。
これらの性質は、生成されるボックスの表示特性であることから現在は CSS でボックス性質として設定できるようになっています。その表示上の性質を決めるのが「display」プロパティで、HTMLタグによって初期値が決まっています。例えば、<p>タグは「block」、<a>タグは「inline」というようにほとんどのHTMLタグはblockもしくはinlineが初期値になっています。
Note
CSS3ではdisplayプロパティにその他にもさまざまな値を設定することができます。設定された要素の子要素のレイアウト変更する「フレックス（fLex）」や「グリッド（grid）」などを設定することができます。
displayプロパティの値にblockを指定するとブロックレベル要素の性質、inlineを指定するとインライン要素の性質を持ったボックスとして表示されます。
また、inline-blockという値があり、この値を指定した場合ブロックレベル要素とインライン要素の中間のような性質を持ったボックスが生成されます。
レイアウトには非常に重要なプロパティとなりますので、それぞれのボックスの持つ性質の違いについて理解しておきましょう。
ブロックボックス – display: block
次のようにdisplayプロパティの値にblockを指定されたときのブロックボックスの特徴を見ていきましょう。
.element {
display: block;
}ブロックボックスの特徴
ブロックボックスは前後には改行が入り、上から下へと縦に並んで表示されます。また、ボックスは左から右へ横方向に伸び、幅を指定しなければ親要素の幅全体に（できる限り左右に）広がります。
次の例はdisplayプロパティの初期値がblockであるdiv要素を並べています。背景色を設定することでボックスの範囲が分かります。
ブロックボックスは親要素一杯の幅に広がり、ボックスの前後には改行が入ることで縦に並んで表示されています。
ブロックボックスでは幅、高さ、上下左右のすべての余白が指定できる
ブロックボックスは、幅（widthプロパティ）、高さ（heightプロパティ）、上下左右すべての辺の内側余白 （paddingプロパティ）と外側余白（marginプロパティ）の値を指定することができます。
次の例ではブロックボックスにwidthプロパティとheightプロパティと上下左右すべての辺にpaddingプロパティとmarginプロパテ を指定しています。
すべてのプロパティが有効であることがわかります。
インラインボックス – display: inline
displayプロパティの値が「inline」に指定された要素は、インラインボックスを生成します。
spanタグやaタグ、img要素などは指定しなくても、displayプロパティの初期値がinlineになっています。inlineはおもに文章の一部として使われる要素に適用されています。
.element {
display: inline;
}インラインボックスの特徴
インラインボックスは左から右へ横方向に配置されます。その前後には改行は入らず、行内の一部として表示されます。インラインボックスが親ボックスの幅を越えるときテキストと同じようにボックスの途中でも折り返されます。
次の例では、インラインの要素であるspan要素が複数並んでいます。
インラインボックスの前後には改行が入らずに横に並んで表示され、親要素の端にまでたどり着くとボックスの途中でも折り返されています。
インラインボックスは幅と高さを指定できない
inlineの要素は、CSSで幅（widthプロパティ）と高さ（heightプロパティ）を指定することができません。inlineの要素の幅と高さは「要素の中身」に応じて決まります。つまり「テキストの長さ」や「文字の大きさ」、あるいは「画像のサイズ」によりボックスの幅と高さが自動で決まることになります。
次のコードではインラインの要素であるspan要素にwidthプロパティとheightプロパティを指定しています。
<p><span>インラインボックスの幅と高さは「要素の中身」に応じて決まります。インラインのボックスは幅と高さを指定できません。</span></p>span {
background-color: #000000;
color: #ffffff;
width: 200px;
height: 100px;
}指定されたwidthプロパティとheightプロパティはインラインボックスには何の影響も与えていないのがわかります。インラインボックスではwidthプロパティとheightプロパティに値を指定してもは無効になってしまいます。
インラインボックスの余白設定
インラインボックスは左右の余白はmargin・paddingプロパティともに指定することができます。しかし、上下の余白に関しては指定できなかったり、表示上の問題を起こす場合がありますので注意が必要です。
インラインボックスのmarginによる上下の余白指定
インラインボックスは、上下のmarginを指定することはできません。指定してもその値は無効になります。
次の例ではインラインの要素であるspan要素に対して、上下左右にmarginプロパティを指定していますが、上下のmarginは適用されていないのがわかります。
<p>インラインボックスは<span>左右のmarginは指定することができます</span>が、<br><span>上下のmarginを指定することはできません</span>。</p>span {
background-color: #000000;
color: #ffffff;
margin: 30px;
}インラインボックスのpddingによる上下の余白指定
インラインボックスは上下のpaddingプロパティは指定することはできますが、テキストの行間を変更することはできません。
次の例ではインラインの要素であるspan要素に対して、上下左右にpaddingプロパティを指定しています。上下のpaddingは適用されてはいますが、行間には影響を与えていないのでpaddingが重なって表現されています。
<p>インラインボックスは<span>左右のpaddingは指定することができます</span>が、<br><span>上下のpaddingを指定しても行間が変化することはありません</span>。</p>span {
background-color: #000000;
color: #ffffff;
padding: 15px;
}インラインの要素はテキストのベースラインを基準に上下の余白は行間を調整する「line-hgeight」プロパティによってコントロールされてるため、ボックスの余白を調整するmarginやpaddingプロパティに値を指定しても上下の距離（行間）は変りません。
インラインブロックボックス – display: inline-block
displayプロパティの値を「inline-block」に指定すると、ブロックボックスとインラインボックスの両方の性質を併せ持ったボックスを生成します。インラインブロックの生成するボックス特徴を確認しておきましょう。
.element {
display: inline-block;
}インラインブロックボックスの特性
インラインブロックボックスはインラインボックスのように、内容によって幅が決まり、前後の要素には改行が入らず横に並びます。ただし、親ボックスの幅を越えるボックスは改行して次の列から始まります。
次の例では、ブロックボックスの要素であるdiv要素のdisplayプロパティの値をinline-blockに指定してインラインブロックボックスに変更しています。
インラインブロックボックスをtext-alignプロパティで水平方向の揃え
インラインブロックボックスはインラインボックスと同様に「text-align」プロパティで水平方向の行揃えを設定することができます。 text-alignプロパティはインラインブロックボックスの親要素に指定します。
次の例は、インラインブロックボックスを右揃えに指定しています。
<div class="parent">
<div class="child">インラインブロックボックス</div>
<div class="child">インラインブロックボックス</div>
<div class="child">インラインブロックボックス</div>
</div>.parent {
text-align: right;
}
.child {
display: inline-block;
background-color: #000000;
color: #ffffff;
}インラインブロックボックスをvertical-alignプロパティで垂直方向の揃え
インラインブロックボックスはインラインボックスと同様に「vertical-align」プロパティで垂直方向の揃えを設定することができます。
横に並ぶインラインブロックボックスの内容量（テキスト量）が異なっているとき、ボックスはそれぞれテキストの下端に沿って揃っています。これは「vertical-align」プロパティの値の規定値として「baseline」が適応されているからです。
次の例はインラインブロックボックスにvertical-alignプロパティの値に「middle」を指定し、垂直方向中央に揃えています。
div {
display: inline-block;
background-color: #000000;
color: #ffffff;
vertical-align: middle;
}インラインブロックボックスは幅と高さを指定できる
インラインブロックボックスは、ブロックボックスのように幅（widthプロパティ）、高さ（heightプロパティ）の値を指定することができます。
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>div {
display: inline-block;
background-color: #000000;
color: #ffffff;
}
.box1 {
width: 120px;
height: 80px;
}
.box2 {
width: 100px;
height: 120px;
}
.box3 {
width: 160px;
height: 50px;
}インラインブロックボックスは上下左右すべての余白が指定できる
インラインブロックボックスは、ブロックボックスのように上下左右すべての辺の内側余白 （paddingプロパティ）と外側余白（marginプロパティ）の値を指定することができます。
div {
display: inline-block;
background-color: #000000;
color: #ffffff;
}
.box1 {
margin: 20px;
padding: 10px;
}
.box2 {
margin: 5px;
padding: 30px;
}
.box3 {
margin: 10px;
padding: 20px;
}