Display: Block Inside Display: Inline

質問では、display:inline 親内の display:block 要素のシナリオが提示されていますが、基本的な質問は、このようなシナリオにおけるこれら 2 つの表示値の違いに関するものです。

CSS 2.1 仕様によれば、インライン要素にブロック要素が含まれる場合、インライン ボックスはブロックの周囲で分割されます。匿名ブロック ボックスは、ブロックの前後のインライン コンテンツの周囲に作成され、ブロックはこれらの匿名ボックスの兄弟になります。

これにより、表示として定義されているにもかかわらず、親要素が次のような構造になります。 inline では、display:block 子の存在により動作が異なります。親要素は事実上、匿名ブロック ボックスを含むブロック ボックスになります。

表示: インラインと表示: ブロック親の違い

構造は類似していますが、微妙な違いがあります。このシナリオにおける display:inline と display:block の親要素の違い:

• コンテンツ フロー: インライン要素はテキストとともに水平方向に流れますが、ブロック要素は垂直方向に流れます。インライン親の周囲に作成された匿名ブロック ボックスにより、子要素を垂直に積み重ねることができ、ブロックの動作をシミュレートできます。
• 匿名ブロック ボックス生成: Display:inline により、匿名ブロック ボックスが生成されます。ブロックの子に隣接するインライン コンテンツ。これは、親要素全体がブロック ボックスになる、display:block 親の場合には当てはまりません。
• 境界線の処理: CSS 2.1 仕様では、境界線などの特定のプロパティが、匿名のブロック ボックスを生成する要素には引き続き適用されます。したがって、境界線を持つ display:inline 親では、匿名ブロック ボックスの周囲に境界線が描画され、改行部分に開いた境界線が作成されます。対照的に、境界線を持つ display:block 親は、ブロック ボックス全体の周りに閉じた境界線を持ちます。
• テキストの折り返し: インライン要素は自然にテキストを周囲に折り込みます。このシナリオでは、インライン コンテンツを囲む匿名ブロック ボックスにより、親が display:block 要素であるかのように、テキストがブロックの子の周囲に折り返されるのを防ぎます。