インライン要素内にブロック要素を配置するのは間違っていることはわかっていますが、次の場合はどうでしょうか?
次の有効なマークアップを想像してください:
<div><p>This is a paragraph</p></div>
次に、この CSS を追加します。
div {
display:inline;
}
これにより、インライン要素にブロック要素が含まれる状況が作成されます (div はインラインになり、p はデフォルトでブロックになります)
ページ要素はまだ有効ですか?
HTML が有効かどうかをいつ、どのように判断するのでしょうか (CSS ルールが適用される前ですか、後ですか)?
アップデート：その後、HTML5 ではリンク タグ内にブロック レベル要素を配置することが完全に有効であることを知りました。例:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
これは、HTML の大きなブロックをリンクにしたい場合に非常に便利です。
ベストアンサー1
からCSS 2.1 仕様:
インライン ボックスにフロー内のブロック レベル ボックスが含まれる場合、インライン ボックス (および同じ行ボックス内のそのインラインの祖先) はブロック レベル ボックス (および連続しているブロック レベルの兄弟、または折りたたみ可能な空白やフロー外の要素によってのみ区切られているブロック レベルの兄弟) の周囲で改行され、インライン ボックスはブロック レベル ボックスの両側に 1 つずつ、2 つのボックスに分割されます (どちらかの側が空であっても)。改行前と改行後の行ボックスは匿名ブロック ボックスに囲まれ、ブロック レベル ボックスはそれらの匿名ボックスの兄弟になります。このようなインライン ボックスが相対配置の影響を受ける場合、結果として生じる変換は、インライン ボックスに含まれるブロック レベル ボックスにも影響します。
このモデルは、次のルールが当てはまる場合、次の例に適用されます。
p { display: inline } span { display: block }この HTML ドキュメントで使用されました:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>P 要素には、匿名テキストのチャンク (C1) が含まれ、その後にブロック レベル要素が続き、さらに別の匿名テキストのチャンク (C2) が続きます。結果として得られるボックスは、BODY を表すブロック ボックス、C1 の周囲に匿名ブロック ボックス、SPAN ブロック ボックス、および C2 の周囲に別の匿名ブロック ボックスが含まれます。
匿名ボックスのプロパティは、囲んでいる非匿名ボックスから継承されます (たとえば、サブセクションの見出し「匿名ブロック ボックス」のすぐ下の例では、DIV のプロパティです)。継承されないプロパティには初期値があります。たとえば、匿名ボックスのフォントは DIV から継承されますが、余白は 0 になります。
匿名ブロック ボックスを生成する要素に設定されたプロパティは、その要素のボックスとコンテンツにも適用されます。たとえば、上記の例で P 要素に境界線が設定されていた場合、境界線は C1 (行の末尾で開く) と C2 (行の先頭で開く) の周囲に描画されます。
一部のユーザーエージェントは、ブロックを含むインラインの境界線を他の方法で実装しています。たとえば、ネストされたブロックを「匿名の行ボックス」で囲み、そのボックスの周囲にインライン境界線を描画します。CSS1 と CSS2 ではこの動作は定義されていないため、CSS1 のみのユーザーエージェントと CSS2 のみのユーザーエージェントは、この代替モデルを実装して、CSS 2.1 のこの部分に準拠していると主張することができます。これは、この仕様がリリースされた後に開発された UA には適用されません。
それをどう解釈するかはあなた次第です。明らかに動作は CSS で指定されていますが、それがすべてのケースをカバーしているかどうか、または今日のブラウザー全体で一貫して実装されているかどうかは不明です。