CSS【インラインとブロック】～inline、inline-block、block

HTML5から「カテゴリによる分類とコンテンツ・モデル」という新たなルールが導入され、それ以前はHTML要素で行われていた「インライン要素かブロック要素か」という区別が、CSSの初期設定で行う「インライン扱いかブロック扱いか」という区別に移行しました。
今回は、各HTML要素が、CSSの初期設定でどのように分けられているのかをまとめたいと思います。

カテゴリによる分類とコンテンツ・モデルについては、以下のページもご覧下さい。
HTML5 【 カテゴリ 】 ～ 7つのカテゴリ
HTML5 【 コンテンツ・モデル 】 ～ 要素とカテゴリとコンテンツ・モデル

１．inline、inline-block、block

HTML要素で行われていたインライン要素とブロック要素の指定がHTML5で廃止され、それに代わって、それらの指定をCSSのデフォルトスタイルとして行うことになりました。
そして、その指定は、CSSのdisplayプロパティを使って行います。

CSSのdisplayプロパティには、主に次のような値を指定します。

今回は、この中の、inline（インライン）、inline-block（インラインブロック）、block（ブロック）について見ていきます。

▲目次へ戻る

２．インライン

インラインレベルの要素は、要素の前後で改行されず、横に並ぶ性質の要素で、テキストに関わる要素です。

サイズは、テキストによって決まるため、CSSでwidthやheightの指定はできません。
marginは、左右のみ指定できます。上下は指定しても無視されます。

インラインレベルの要素は、ブラウザのデフォルトスタイルが display: inline（displayプロパティの値が inline）になっている要素です。

インラインレベルの要素

a要素とspan要素とmark要素を続けて書くと、次のような表示となります。

ソースは次の通りです。

<a href="#">a要素</a>
<span>span要素</span>
<mark>mark要素</mark>

インラインの置換要素

インラインレベルの要素の中で、置換要素と言われる要素があります。

これは、中身が他の何かに置き換えられる要素で、例えばimg要素がこれにあたります。
中身が、テキストではなく画像等になり、他のファイルが入ってくるため、自然に幅や高さができてしまう要素です。

width属性やheight属性、またはCSSで、サイズの指定ができますが、改行はされず横に並んで表示されます。
これらは、文法上はインラインですが、表示はdisplay:inline-blockと同じようになります。

インラインの置換要素

置換要素以外のインラインレベルの要素は、非置換要素と言って、テキストに関わるインラインレベルの要素がこれにあたります。

置換要素のimg要素、canvas要素、object要素を続けて書くと、次のような表示となります。

ソースは次の通りです。

（CSS）
div#sample {
    padding:0;
    font-size:0}
div#sample img, div#sample object, div#sample canvas {
    margin:5px 0 5px 5px;
    vertical-align:bottom}
div#sample canvas {background:#FF99CC}

（HTML）
<div id="sample">
    <img src="img/img1.jpg" width="80" height="80">
    <canvas width="80" height="80"></canvas>
    <object data="img/img2.jpg" width="80" height="80"></object>
</div>

親要素のpaddingが0のため、各要素の上下マージン効いていることがわかります。
通常、インラインは上下マージン効かないので、インラインの置換要素は、文法上ではインラインで、スタイルはインラインブロックと同じです。

▲目次へ戻る

３．インラインブロック

インラインブロックレベルの要素は、display: inline-blockがデフォルトスタイルになっている要素です。
インラインの置換要素と同様に、幅や高さは指定できるものの、横に並んで表示されます。

インラインブロックレベルの要素

次のような書き方でselect要素を２つ続けて設置すると、幅や高さは指定できますが、横に並んで表示されます。

（CSS）
select {
    height:40px;
    width:40%;
    margin:.5em 0 .5em .5em;
    padding:0 1em;
    appearance:none;
    border:1px solid #c1d5fd;
    font-size:12px}

（HTML）
<select>
    <option value="">選択してください</option>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>
<select>
    <option value="">選択してください</option>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

select要素に、上下マージンを 0.5em ずつ指定していますが、 指定したマージンが表示に反映されます。
インラインは上下マージンが効かないので、ここが、ブロックレベルの性質も持っていると言われる点です。

▲目次へ戻る

４．ブロック

ブロックレベルの要素は、ブロック（固まり）になる要素です。

これらは、デフォルトスタイルが display: block になっている要素です。
ブロックレベルの要素が並ぶと、要素の前後で自動的に改行されるので、上から下へ縦に並んでいきます。CSSで幅や高さやマージンも指定できます。

ブロックレベルの要素

p要素、div要素、li要素を続けて書くと、要素ごとに改行されて縦に並んで表示されます。

p要素

• li要素

ソースは次の通りです。

（CSS）
p,
div,
ul li {margin:0 0 0.7em 0; background:#e6cdd6; line-height:3em; padding:0 1em}

（HTML）
<p>p要素</p>
<div>div要素</div>
<ul><li>li要素</li></ul>

▲目次へ戻る