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で自由に変更できます。
具体例・使い方
/* block: 横幅100%、縦に積まれる */
display: block;
/* inline: 中身の幅だけ、横に並ぶ */
display: inline;
/* inline-block: 横に並ぶ + width/height指定可 */
display: inline-block;
/* リンクをボタン風にする例 */
a { display: inline-block; padding: 8px 16px; }いつ使う？
リンク（inline）にpaddingを効かせたい → inline-block に変更。span を横幅いっぱいにしたい → block に変更。div を横に並べたい → inline-block か flex を使う。
間違いやすいポイント
❌ inline要素にwidth/heightを指定しても効かない
inline のままでは幅と高さは指定できません。display: inline-block に変更すれば効くようになります。
❌ inline-block で要素間に隙間ができる
HTMLの改行が空白として表示されます。親に font-size: 0 を指定するか、Flexbox を使えば解消できます。
よくある疑問
Q: inline-blockとは？
A: inlineのように横並びになりつつ、blockのように幅・高さを指定できる便利な値です。
Q: spanにwidthを指定しても効かないのはなぜ？
A: spanはデフォルトでinline要素だからです。display: inline-blockかdisplay: blockに変えると効きます。
関連用語
📖 関連レッスン
レッスンを見る →