CSS

display: inline・display: block の違い

初級

読み方：ディスプレイインライン・ディスプレイブロック のちがい｜英語：display inline vs display block

display: blockは前後で改行され幅・高さを指定できる。display: inlineは改行されず幅・高さを指定できない。

やさしい説明

display:blockは横幅いっぱいに広がり改行されます。display:inlineは中身の幅だけ使い、横に並びます。CSSで表示方法を切り替えられます。

block は「段ボール箱」のイメージで縦に積まれます。inline は「文中の単語」のイメージで横に並びます。inline-block はその「いいとこ取り」で、横に並びつつ幅と高さも指定できます。

デフォルトの display 値はタグによって決まっています。div は block、span は inline です。CSSで自由に変更できます。

3つの違いまとめ

値 横幅 width/height 代表タグ
block行全体を占める指定できるdiv, p, h1〜h6
inline内容の幅だけ効かないspan, a, strong
inline-block内容の幅だけ指定できるimg（デフォルト）

具体例・使い方

/* block: 横幅100%、縦に積まれる */
.section { display: block; }

/* inline: 中身の幅だけ、横に並ぶ */
.badge { display: inline; }

/* inline-block: 横に並ぶ + width/height指定可 */
.btn { display: inline-block; padding: 8px 16px; }

/* リンクをボタン風にする典型例 */
a.btn {
  display: inline-block;
  padding: 8px 16px;
  background: blue;
  color: white;
  border-radius: 4px;
}

よくある切り替えパターン

/* ナビゲーションのliを横並びにする */
nav li {
  display: inline-block; /* または display: inline */
}

/* spanをブロックにして改行させる */
.label {
  display: block;
  margin-bottom: 4px;
}

/* aタグにpadding/widthを効かせる */
.menu-link {
  display: inline-block;
  width: 120px;
  text-align: center;
  padding: 12px 0;
}

現代のレイアウトでは Flexbox（display: flex）や Grid（display: grid）を使うことが多いです。横並び・縦並びの制御は flex が最も直感的です。

いつ使う？

  • リンク（inline）に padding を効かせたい → inline-block に変更
  • span を横幅いっぱいにしたい → block に変更
  • div を横に並べたい → inline-block か flex を使う
  • ナビゲーションのリストを横並びにしたい → inline-block か flex

間違いやすいポイント

❌ inline要素にwidth/heightを指定しても効かない

inline のままでは幅と高さは指定できません。display: inline-block に変更すれば効くようになります。

❌ inline-block で要素間に謎の隙間ができる

HTMLの改行・スペースが空白として表示されます。親に display: flex を使うのが最も簡単な解決策です。

よくある疑問

Q: inline-blockとは？

A: inlineのように横並びになりつつ、blockのように幅・高さを指定できる便利な値です。

Q: spanにwidthを指定しても効かないのはなぜ？

A: spanはデフォルトでinline要素だからです。display: inline-blockかdisplay: blockに変えると効きます。

関連用語

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A

← 用語集一覧に戻る