CSS
display: inline・display: block の違い
読み方：ディスプレイインライン・ディスプレイブロック のちがい
display: blockは前後で改行され幅・高さを指定できる。display: inlineは改行されず幅・高さを指定できない。
やさしい説明
display:blockは横幅いっぱいに広がり改行されます。display:inlineは中身の幅だけ使い、横に並びます。CSSで表示方法を切り替えられます。
具体例・使い方
display: block; → 横幅100%、縦に積まれる、width/height指定可
display: inline; → 中身の幅だけ、横に並ぶ、width/height指定不可
display: inline-block; → 横に並ぶけどwidth/height指定可（いいとこ取り）
よくある疑問
Q: inline-blockとは？
A: inlineのように横並びになりつつ、blockのように幅・高さを指定できる便利な値です。
Q: spanにwidthを指定しても効かないのはなぜ？
A: spanはデフォルトでinline要素だからです。display: inline-blockかdisplay: blockに変えると効きます。
関連用語
📖 関連レッスン
レッスンを見る →