CSS はインライン要素内のブロック要素を有効な HTML 構造に変換できますか?

ブロック要素が含まれている場合、ブロック要素を CSS を使用してインラインに変更できますか?

ブロック要素を CSS 内に配置すると理解しているにもかかわらず、インライン要素は不適切です。CSS を適用してインライン要素をブロック要素に変更し、その中に別の要素が含まれる場合に何が起こるか興味が湧きます。 block 要素。

HTML マークアップ:

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

適用される CSS:

div {
  display: inline;
}

このシナリオでは、インライン要素（DIV）にはブロック要素（P）が含まれています。これによって HTML の有効性の問題が発生するのでしょうか?

HTML の有効性と CSS アプリケーション

HTML の有効性がどのように判断されるかについては意見が異なります。 CSS ルールを適用する前に妥当性を判断すべきだと主張する人もいますが、CSS 後の検証を提案する人もいます。

CSS 2.1 仕様

CSS 2.1 仕様はこの状況に対処しています。 、インライン ボックスにインフローのブロック レベル ボックスが含まれる場合、インライン ボックスは 2 つに分割され、ブロック レベル ボックスの両側に 1 つずつ配置されると述べています。さらに、匿名ブロック ボックスが、壊れたインライン ボックスとブロック レベル ボックスを囲むように作成されます。

実装と一貫性

CSS 仕様では動作の概要が明確に説明されていますが、ブラウザー間で一貫して実装されるかどうかは不明です。ブラウザによっては、ネストされたブロックを「匿名行ボックス」で包み、その周りにインライン境界線を描く代替モデルを実装している場合があります。

結論

このコンテキストにおける妥当性の問題解釈の余地が残されています。 CSS ルールはブロック要素を含むインライン要素の動作を指定しますが、ブラウザ間でのこのルールの実装と一貫性は絶対的なものではありません。デザイナーは、複数のブラウザーで望ましい結果を確実に得るために、このような CSS スタイルを採用するときは注意することをお勧めします。

以上がCSS はインライン要素内のブロック要素を有効な HTML 構造に変換できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。