display

値の意味

• inline：初期値です。文章の文字と同じように、行の中に並びます。width・height は効かず、上下の padding・border は描かれても行の間は広がりません。
• block：前後で改行され、横幅いっぱいに広がる箱になります。
• inline-block：行の中に並ぶ、ひとかたまりの箱になります。width・height や上下の余白も効きます。
• flex / inline-flex：ブロック（または行の中の箱）になり、中の要素をフレックスボックスで並べます。初期状態では横 1 列に並び、高さを決めていない要素は行の高さまで伸びます。
• grid / inline-grid：ブロック（または行の中の箱）になり、中の要素をグリッドで並べます。列を決めないと縦 1 列に積まれ、幅を決めていない要素はマスの幅まで伸びます。
• flow-root：ブロックの箱になり、新しいブロック整形文脈を作ります。中の float が箱の下にはみ出さず、子の上下の margin が箱の外へ抜けなくなります。このページの見本では block と同じに見えます。
• contents：要素の箱が無くなり、中身だけが親の中にじかに置かれたように並びます。要素の枠線や背景も描かれません。
• none：要素も中身も表示されず、場所も取りません（visibility: hidden と違って、空きも残りません）。

使いどころ

• 中の要素を横に並べたり、格子に並べたりするときに flex・grid を書きます。
• リンクやボタンを、文章の行の中に置いたまま大きさを決めたいときに inline-block を使います。
• 要素を隠すときに none を使います。

気をつけること

• フレックスボックスやグリッドの項目、float や position: absolute・fixed の要素では、inline などを書いてもブロックとして扱われます（inline-flex は flex に、inline-grid は grid になります）。
• display: inline flex のように外側と内側を 2 つの語で書く書き方もあり、主要なブラウザが対応しています。ほかに、リストの印を付ける list-item や、表の部品にする table・table-cell などがあります。このページのコントロールは 1 語の主な値だけです。
• none にした要素は、読み上げソフトにも伝わりません。
• ボタンや見出し、リスト、表に contents を書くと、ブラウザによってはその要素の役割（ボタンであることなど）が読み上げソフトに伝わらなくなることがあります。中身の並べ方を変えたいだけのときは、入れ物のdiv などに使います。

このページのプレビューでは、文章の間に置いた入れ物（2 番目の子、青い破線の枠）に書いた値が効きます。入れ物の中には、高さの違う 3 つの札（display: inline-block）が入っています。