「width を指定したのに、なぜか効かない部品がある」——CSSを触っていると、そんな不思議に出会います。じつはHTMLの部品には2つの性格があり、それによってふるまいが変わるのです。その性格をあらわすのが display です。
ブロック：縦に積み重なる
<div> <p> <h1> などはブロックという性格。横幅いっぱいに広がり、上から下へ縦に積まれます。width や height も、素直に効きます。段落が1つずつ改行されて並ぶのは、この性格のおかげです。
インライン：文中に流れる
いっぽう <a> <span> <strong> などはインライン。文章の中を左から右へ流れ、横に並びます。文の途中でリンクだけ色が変わっても改行されないのは、この性格だからです。ただしインラインには、width や height が効きません。
displayで性格を変える
この性格は display で切り替えられます。
span {
display: block;
}インラインの <span> をブロックに変えると、縦に積まれ、width も効くようになります。逆に display: none; にすると、その部品はまるごと消えて見えなくなります（あとでJavaScriptで出したり消したりするときに活躍します）。
display には、flex にも「インラインでもある版」の inline-flex があります。ふつうのflexはブロックとして縦に積まれますが、inline-flexは文中に並びながら、中身は横一列に並べられる——アイコンと文字をセットにしたリンク部品などで重宝します。
このレッスンのまとめ
- 部品にはブロック（縦に積む）とインライン（文中に流れる）の性格がある
- インラインには
width/heightが効かない displayで性格を変えられる（block/inline-block/none）inline-flexは「文中に並びつつ、中は横一列」といういいとこ取り
:::
