Block、Inline、Inline-Block

displayプロパティは、CSSで最も基本的なプロパティの1つです。要素がレイアウトフローにどのように参加するか、つまりブロックレベルボックス、インラインボックス、またはその中間のどれを作るかを決定します。

ブロック要素は新しい行から始まり、コンテナーの幅いっぱいに広がります。幅、高さ、マージン、パディングをすべての辺に設定できます。

デフォルトのブロック要素：div、p、h1-h6、section、article。

インライン要素はテキストの中に流し込まれます。新しい行から始まりません。widthやheightを設定しても効果はありません。上下のマージンは無視されますが、水平方向のマージンとパディングは機能します。

デフォルトのインライン要素：span、a、strong、em、img。

display: inline-blockはハイブリッドな表示形式です。要素はインラインで流れ（強制的な改行なし）、一方でブロック要素と同じように幅、高さ、すべてのボックスモデルプロパティに対応します。

Flexboxが登場する前は、横方向のナビゲーションバーにinline-blockが使われていました。欠点は、HTMLソース内の空白によってアイテム間に小さな隙間ができることです。

インラインブロック要素間の空白による隙間は、親要素にfont-size: 0を設定して子要素で元に戻すか、HTML内の空白をなくすことで削除できます。

現在のCSSでは、空白による問題を避けて横方向のレイアウトを実現するには、親要素にdisplay: flexを設定する方法が推奨されます。inline-blockは、単一要素のサイズ指定には今でも便利です。

どの要素のdisplayタイプもCSSで変更できます。リンクをボタンの形にしたり、リストアイテムを横並びにしたりするためによく使われます。

CSSにはdisplay: table、display: table-row、display: table-cellなどが用意されており、テーブル以外の要素にもテーブルレイアウトを適用できます。現在ではほとんど必要ありませんが、古い環境での垂直方向の中央揃えに役立ちます。

display: flow-rootは、overflow: hiddenによる副作用なしに新しいブロックフォーマッティングコンテキストを作成します。フロートを解除し、マージンの相殺がコンテナーの外へ漏れるのを防ぎます。

ブロック要素とインライン要素が兄弟要素として混在すると、ブラウザーは孤立したインラインコンテンツを匿名のブロックボックスで包みます。この動作は見えませんが、予期しないレイアウトの変化が起きる理由を説明できます。

要素をインラインフローに維持したままwidthを設定できるdisplayの値はどれですか。

ブロック要素は幅いっぱいに広がり、新しい行から始まります。インライン要素はテキストとともに流れ、width/heightを無視します。インラインブロックは両方の性質を併せ持ち、インラインで流れながら幅と高さを受け入れます。現在のレイアウトでは、インラインブロックのグリッドよりFlexboxとGridが優先されます。