CSS を適用した後、HTML5 のインライン要素内にブロック要素をネストすることは常に許可されますか?

CSS ルールの違反: ブロック要素を含むインライン要素

従来、インライン要素内でブロック要素をネストすることは HTML 構造の違反と考えられていました。ただし、HTML5 では、この慣行が許容されます。これは、別のブロック要素を囲んでいる場合でも、ブロック要素をインラインに変換することが許容されるという意味ですか?

CSS 仕様のビュー

CSS 2.1 仕様によると、インライン要素にブロックレベル要素が含まれる場合、インライン要素は 2 つの別個のボックスに分割され、ブロック要素とその連続するブロックレベルが囲まれます。 兄弟。結果として得られるこれらの匿名ブロック ボックスは、元のインライン要素の兄弟になります。

例:

次の HTML マークアップと CSS ルールを考慮してください:

<div><p>This is a paragraph</p></div>

div {
  display: inline;
}

このシナリオでは、div はインラインになりますが、p 要素はデフォルトでブロックレベルのままです。 CSS 2.1 によれば、この結果、div は p 要素の周囲で 2 つの匿名ブロック ボックスに分割されます。

ブラウザの実装と有効性

CSS 仕様では、次のガイダンスが提供されています。ただし、実装の一貫性と解釈は最新のブラウザ間で異なる場合があります。 CSS ルールの適用後にそのようなネストが有効であるとみなされるかどうかは、特定のブラウザとその実装によって異なります。

結論

一方、HTML5 ではインライン内でブロック要素をネストできます。要素にすでにブロック要素が含まれている場合、ブロック要素をインラインに変換すると、灰色の領域が表示されます。この動作は技術的には CSS で指定されていますが、ブラウザーの解釈と実装に依存します。この方法を採用する前に、ブラウザーの互換性と Web アプリケーションの意図された動作を考慮することが重要です。

以上がCSS を適用した後、HTML5 のインライン要素内にブロック要素をネストすることは常に許可されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。