display:blockCSSを持つ要素が CSS を持つ要素の DOM 子である場合display:inline(ブロック要素がインライン要素の子になるように)に何が起こるかを理解したいと思います。
このシナリオは、CSS 2.1 仕様の匿名ブロック ボックスセクションで説明されています。この例には、次の規則が含まれています ...
body { display: inline }
p { display: block }
...そして付随するテキストは...
BODY 要素には、匿名テキストのチャンク (C1) が含まれ、その後にブロック レベル要素が続き、その後に匿名テキストの別のチャンク (C2) が続きます。結果として得られるボックスは、BODY を囲む匿名ブロック ボックスになり、C1 を囲む匿名ブロック ボックス、P ブロック ボックス、および C2 を囲む別の匿名ブロック ボックスが含まれます。
display:inline親要素があり、この親に である子がある場合、display:blockその子の存在により、親はほぼのように動作し、 (親には匿名のみが含まれているという点で)display:blockとして定義されているという事実は無視されます。display:inlineおよび非匿名ブロックの子、つまり、インラインの子が含まれていない)？
私の質問は、このシナリオ (子がいる場合)では、代わりにdisplay:block親が定義されていることの違いは何ですか?display:inlinedisplay:block
編集: さまざまなブラウザー実装が実際にどのように動作するかどうかよりも、CSS 2.1 標準を理解することに関心があります。
2回目の編集:
仕様上、1点だけ違いがあります。次のドキュメントでは、2 番目の「ブロック」段落の境界線が段落全体とページの幅全体を囲んでいます。一方、最初の 'インライン段落の境界線は、段落内の各行 (複数の行がある場合でも) の周りにあり、各行の正確な幅を超えません (各行はページ幅よりも短くなります)。
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:1px;
display: inline;
}
p.two
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Some text. <b>Note:</b> The "border-width"
property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text.</p>
</body>
</html>
次のスタイルルールを追加すると...
b
{
display: block;
}
... 次に、最初のインライン段落の「注:」がブロックになり、段落が分割されます (仕様によると、段落の最初と最後の部分は無名ブロックになります)。ただし、段落の最初と最後の部分の境界線は依然として「インライン」スタイルの境界線です。そのため、最初p.oneに宣言された場合と同じではありませんdisplay:block。
仕様からの引用があります。
匿名ブロック ボックスを生成する要素に設定されたプロパティは、その要素のボックスとコンテンツに引き続き適用されます。たとえば、上記の例で BODY 要素に境界線が設定されている場合、境界線は C1 (行末で開く) と C2 (行頭で開く) の周りに描画されます。
「border-style」プロパティは、違いが見える唯一のタイプのプロパティですか?