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

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

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

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

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

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

HTML

     

          
2019年8月8日
          
タピオカミルクティ抹茶味の販売を開始しました
     
     

          
2019年8月2日
          
新宿2号店をオープンしました
     
<

CSS

.block {
     display: block;
}
ul {
     padding: 0;
     margin: 0;
}
li {
     border-bottom: 1px solid #dedede;
     padding: 0 0 10px 0;
     margin: 0 0 10px 0;
     list-style-type: none;
}

表示

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

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

HTML

     

          
2019年8月8日
          
新商品
          
タピオカミルクティ抹茶味の販売を開始しました
     
     

          
2019年8月2日
          
新店舗
          
新宿2号店をオープンしました
     

CSS

.inlineblock {
     display: inline-block;
}
.tag {
     background: #ff9800;
     border-radius: 4px; color: #fff;
     font-size: 90%;
     padding: 2px 10px;
}
ul {
     padding: 0;
     margin: 0;
}
li {
     border-bottom: 1px solid #dedede;
     padding: 0 0 10px 0;
     margin: 0 0 10px 0;
     list-style-type: none;
}

表示

• 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

.block {
     display: block;
}

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

表示

りんご
みかん
メロン

問題2

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

HTML

りんご
みかん
メロン

CSS

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

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

表示

　

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

問題3

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

HTML

りんご
みかん
メロン

CSS

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

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

表示