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

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

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

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

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

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

HTML

<ul>
<li>
<div class="block">2019年8月8日</div>
<div class="block">タピオカミルクティ抹茶味の販売を開始しました</div>
</li>

<li>
<div class="block">2019年8月2日</div>
<div class="block">新宿2号店をオープンしました</div>
</li>
</ul>

CSS

.block {
display: block;
}

li {
border-bottom: 1px solid #dedede;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
}

表示

divを使うと、改行<br>を使わなくとも、ブロック要素になり改行と同じ表示なります。

（注）divは初期値としてdisplayがblockを持っているので、cssでわざわざblockを指定しなくてもよいですが、ここではあえて書いています。

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

HTML

<ul>
<li>
<div class="inlineblock">2019年8月8日</div>
<div class="inlineblock tag">新商品</div>
<div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div>
</li>

<li>
<div class="inlineblock">2019年8月2日</div>
<div class="inlineblock tag">新商品</div>
<div class="inlineblock">新宿2号店をオープンしました</div>
</li>
</ul>

CSS

.inlineblock {
display: inline-block;
}

.tag {
background: #ff9800;
border-radius: 4px; color: #fff;
font-size: 90%;
padding: 2px 10px;
}

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

表示

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

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

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

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

問題1

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

HTML

<div class="block">りんご</div>

<div class="block">みかん</div>

<div class="block">メロン</div>

CSS

.block {
display: block;
}

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

表示

りんご
みかん
メロン

問題2

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

HTML

<div class="inline-block">りんご</div>

<div class="inline-block">みかん</div>

<div class="inline-block">メロン</div>

CSS

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

表示

各div要素はinline-blockなので、横並びに表示されます。

※ただし、スマートフォンなどの横幅が狭いスクリーンでは改行される場合もあります。

問題3

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

HTML

<div class="block">りんご</div>

<div class="inline-block">みかん</div>

<div class="inline-block">メロン</div>

CSS

.block {
display: block;
}

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

表示

りんごはblockなので横幅100%で表示されます。

みかんとメロンはともにinline-blockなので、右に詰めて表示されます。