HTMLのブロックとインラインの違い

ブロックとインラインというのは、要素がブラウザで表示されるときの性質です。

それぞれ表示のされ方が異なり、設定できる項目――縦幅、横幅、余白幅も異なります。

このページではその違いについて見ていきます。

表示の性質

要素の外部表示の仕方は、大きく分けると、ブロックとインラインの二つに大別されます。

これはCSSのdisplayプロパティで設定されているもので、要素によって初期値が異なります
「display: block;」であればブロックレベルの要素、「display: inline;」ならインラインレベルの要素として設定されています。

ブロックレベルの要素には<p>、<div>、<h1>などがあります。

表示の性質としては、デフォルトでは親要素の横幅いっぱいに広がります。
そのあと改行されるので、ブロックレベルの要素を続けて使用すると縦並びになります。

html

<div class="box-box">
  <p>block1</p>
  <p>block2</p>
  <p>block3</p>
</div>

css

.box-box {
  border: 2px solid;
}

p {
  text-align: center;
  background-color: orange;
}

block1

block2

block3

実際に要素が横幅いっぱいに広がり、縦に並んでいることがわかると思います。

インラインレベルの要素には<a>、<span>、<img>タグなどがあります。

表示の仕方は行に水平に並んでいきます。

html

<div class="box-box">
  <span>inline1</span>
  <span>inline2</span>
  <span>inline3</span>
</div>

css

.box-box {
  border: 2px solid;
}

span {
  background-color: #6ac1e4;
}

inline1 inline2 inline3

今度は現在の行に、水平に要素が並びました。

ブロックからインライン、またその逆に表示性質を変更するにはCSSで行います。

ブロックレベルの要素にする
display: block;

インラインレベルの要素にする
display: inline;

ブロックレベルの要素は、縦幅（height）、横幅（width）、すべての余白（padding、margin）が設定できます。

インラインレベルの要素は縦と横の幅が設定できません。またpaddingとmarginは左右のみ設定できます。

displayの外部表示の設定値に、インラインブロックというものがあります。
これはインラインと表示性質は同じですが、ブロックレベルと同じように縦幅、横幅、すべての余白の設定が可能になった形式です。
「display: inline-block;」でインラインブロックに変更できます。

ブロックレベルとインラインブロックはすべて設定可能ですが、インラインレベルの要素は左右の余白のみとなっているため注意が必要です。

ブロックとインラインについてまとめてきました。

このページが少しでもお役に立てたのなら幸いです。