inline- * something *のプロパティの違いを表示する
一部のディスプレイプロパティの詳細は1対1の比較でカバーされていることに気づきましたが、違いを説明するのにカバーされていないものはかなりあります。誰かがさまざまなインライン何か表示タグの違いを説明できますか？
W3schoolsのような場所についてより精巧な定義があれば不思議に思うでしょう。
唯一の違いは、ブロックバリアントとインラインバリアントを持つ表示タイプの場合、inline-*表示タイプはボックスがインラインに配置されている（つまり インラインフォーマットコンテキスト ）のに対して、他のタイプには ブロックフォーマットコンテキスト の他のブロックレベル要素と同じフォーマット規則のほとんどに従って、ブロックレベルボックスとしてフォーマットされたボックス。ブロックレベルのボックスとインラインレベルのボックスの違いは、詳細 elsewhere でカバーされています。
ボックスのcontentsのレイアウト方法に関するすべてはほぼ同じです（もちろん、その詳細はディスプレイタイプ自体によって制御されます）。その他の微妙な違いは、仕様で明示的に述べられているはずです。私の知る限り、実際にはそのような違いはありません。
疑問がある場合は、ブロックレベルの表示タイプをお勧めします。インラインレベルが適切かどうかを自問する場合、答えはノーです。とにかく、ボックスが 絶対配置またはフローティング などのインラインレベルのボックスとしてフォーマットされたり、代わりにフレックスアイテムまたはグリッドアイテムとしてフォーマットされたりすることを防ぐ場合があります。結果は、inline-*バリアントから通常のブロックバリアントへの直接変換です。つまり、inline-blockはblockに変換され、inline-tableはtableに変換され、inline-flexはflexに変換され、inline-gridはgridに。繰り返しになりますが、これは要素のcontentsがどのようにフォーマットされるかに直接影響しません。
各表示タイプとそのインラインレベルの対応物の例を以下に示します。
CSS2.1では、 セクション9.2.4 はblockおよびinline-blockを次のように説明します。
ブロック
この値により、要素はブロックボックスを生成します。インラインブロック
この値により、要素はインラインレベルのブロックコンテナーを生成します。インラインブロックの内部はブロックボックスとしてフォーマットされ、要素自体はアトミックインラインレベルボックスとしてフォーマットされます。
「ブロックボックス」は「ブロックレベルのブロックコンテナ」の省略形であり、ブロックコンテナはブロックレベルのボックスを含むことができるものであることに注意してください。
これらの2つの値の両方により、要素がブロックコンテナーボックスを生成することがわかります。ここで、その内容は常に同じフォーマットルールのセットに従いますが、thatブロックコンテナーボックス自体は、ブロックレベルまたはインラインレベルのいずれかにフォーマットされます。
blockとinline-blockの間には、さらに1つの違いがあります。インラインブロックボックスは常に新しいブロックフォーマットコンテキストを確立します。ブロックボックスはそうするだけです 一連の条件の下で 。これは、ブロックレベルとインラインレベルの対応する他の表示タイプには当てはまりません。
セクション17.2 はtableおよびinline-tableを次のように説明します。
表（HTML：TABLE）
要素がブロックレベルのテーブルを定義することを指定します。これは、ブロックフォーマットコンテキストに参加する長方形のブロックです。inline-table（HTML：TABLE）
要素がインラインレベルのテーブルを定義することを指定します。これは、インラインフォーマットコンテキストに参加する長方形のブロックです）。
Flexbox module は、flexおよびinline-flexを次のように説明します。
フレックス
この値により、要素はブロックレベルのフレックスコンテナーボックスを生成します。inline-flex
この値により、要素はインラインレベルのフレックスコンテナーボックスを生成します。
そして Grid Layout module はgridとinline-gridを次のように説明します：
グリッド
この値により、要素はブロックレベルのグリッドコンテナーボックスを生成します。インライングリッド
この値により、要素はインラインレベルのグリッドコンテナーボックスを生成します。
繰り返しますが、これらすべてのシナリオで、テーブル、フレックスコンテナー、またはグリッドコンテナーは、ブロックレベルでもインラインレベルでもまったく同じように動作します。フレックスコンテナーは常にフレックスアイテムのフレックスフォーマットコンテキストを確立し、グリッドコンテナーは常にグリッドアイテムのグリッドフォーマットコンテキストを確立します。