CSS

display「block」と「inline-block」の違いは?使い方、サンプルで違いがすっきり!

  • このエントリーをはてなブックマークに追加

display:「block」と「inline-block」の違い

まずはblockとinline-blockの違いを見ていきましょう。

blockは要素が横幅いっぱいに表示されます。

一方、inline-blockはその要素の幅に応じて、要素が詰めて表示されます。
上図のように、要素Cは要素A,Bの行に入り切らないので、自動的に改行されて表示されます。

「block」の使い方とサンプル

HTML

CSS

表示

  • 2019年8月8日
    タピオカミルクティ抹茶味の販売を開始しました
  • 2019年8月2日
    新宿2号店をオープンしました
(注)divは初期値としてdisplayがblockを持っているので、cssでわざわざblockを指定しなくてもよいですが、ここではあえて書いています。

「inline-block」の使い方とサンプル

HTML

CSS

表示

  • 2019年8月8日
    新商品
    タピオカミルクティ抹茶味の販売を開始しました
  • 2019年8月2日
    新店舗
    新宿2号店をオープンしました

初期値でblockを持っているhtmlタグ

divのように初めからblock要素を持っているタグがあり、その場合はcssでdisplay: block;を指定する必要はありません。

このように、初期値でblockをとる要素は次のようなタグがあります。

  • <address> 住所など
  • <article>記事など
  • <aside> 脚注、補足情報
  • <blockquote> 引用
  • <details> 折りたたみ要素
  • <dialog> ダイアログボックス
  • <dd> 定義リストの内容
  • <div> 文章
  • <dl> 定義リスト
  • <dt> 定義リストの見出し

問題1

次の場合は、どのように表示されるでしょうか?

HTML

CSS

それぞれブロックなので、表示は次のように、一行ずつ表示されます。

表示

りんご
みかん
メロン

問題2

では次の場合は、どのように表示されるでしょうか?

HTML

CSS

りんごはinline-blockなので、右には次の要素が続くはずですが、
続くみかんが横幅100%なので、改行されて表示、
メロンも同様に一行ずつ表示されます。

表示

りんご
みかん
メロン

 

ぱっと見た感じ問題1と同じ結果ですが、ブラウザの「要素の検証」で見てみると、りんごは文字幅=横幅ということがわかります。

問題3

さらに次の場合は、どのように表示されるでしょうか?

HTML

CSS

今度は、りんごとみかんがinline-blockなので、右に詰めて表示され、
続くメロン横幅100%なので、改行されて表示されます。

表示

りんご
みかん
メロン
  • このエントリーをはてなブックマークに追加