block inline inline-block 要素の違い【幅と高さについて】

block inline inline-block 要素の違い

  • display: block;
  • display: inline;
  • display: inline-block;

上記の3つの違いは何でしょうか?高さと幅に焦点を当てて解説していきます!

高さと幅を全く指定しない場合

block要素の特徴は、改行されて幅が親要素いっぱいに広がっていることです。

一方、inlineとinline-block要素は改行されません。

そして、inlineよりもinline-block要素の方が高さがあります。

ブラウザ

HTML (本文とあまり関係ない記述は省略)

<div class="block">block</div>
<div class="inline">inline</div>
<div class="inline-block">inline-block</div>

CSS (本文とあまり関係ない記述は省略)

.block {
    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

高さと幅を指定した場合

高さ改行
block指定した高さ指定した幅あり
inlineコンテンツの高さコンテンツの幅なし
inline-block指定した高さ指定した幅なし

blockとinline-block要素には、指定した高さと幅が適応されます。

しかし、inline要素には適応されません。

ブラウザ

HTML (本文とあまり関係ない記述は省略)

  <div class="size block">block</div>
  <div class="size inline">inline</div>
  <div class="size inline-block">inline-block</div>

CSS (本文とあまり関係ない記述は省略)

.size {
    width: 250px;
    height: 250px;
}

まとめ

block要素

「デフォルト幅は親要素の幅」、「高さや幅の指定ができる」、「改行あり」

inline要素

「デフォルト幅はコンテンツの幅」「高さや幅の指定が効かない」、「改行なし」

inline-block要素

「デフォルト幅はコンテンツの幅」、「高さや幅の指定ができる」、「改行なし」

デモサイト

URL

https://ki-hi-ro.com/sample/display

ソースコード

https://github.com/ki-hi-ro/display