web-dev-qa-db-ja.com

display：block inside display：inline

CSSがdisplay:blockの要素が、CSSがdisplay:inlineの要素のDOMの子である場合（つまり、ブロック要素がインライン要素の子である場合）に何が起こるかを理解したいと思います。

このシナリオは、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:inlineではなくdisplay:blockで定義されていることの違いは何ですか？

編集：私は、さまざまなブラウザー実装が実際にどのように動作するかどうかよりも、CSS2.1標準を理解することに興味があります。

2回目の編集：

仕様に記載されている違いが1つあります。次のドキュメントでは、2番目の「ブロック」段落の境界線が段落全体とページの幅全体を囲んでいます。一方、1番目のインライン段落の境界線は、段落内の各行の周囲にあり（複数の行がある場合でも）、各行の正確な幅（各行はページ幅よりも短い）以下です。

<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（線の始点で開く）の周りに描画されます。

「ボーダースタイル」プロパティは、違いが見られる唯一のタイプのプロパティですか？

cssinline
30
ChrisW

私が読んだとき 仕様 、私はあなたの質問を実際に見つけます かなりよく答えられました ：

インラインボックスにブロックボックスが含まれている場合、インラインボックス[...] [は]ブロックの周囲で壊れています。休憩前と休憩後の[インライン]ボックスは匿名ボックスで囲まれ、ブロックボックスはそれらの匿名ボックスの兄弟になります。

<BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>

結果のボックスは、BODYの周りの匿名ブロックボックスになり、C1の周りの匿名ブロックボックス、Pブロックボックス、およびC2の周りの別の匿名ブロックボックスが含まれます。

または、視覚的に：

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

今あなたの質問に：これは<BODY style="display: block; ">とは異なりますか？

はい、そうです。それはまだ4ボックスですが（本体の周りの匿名ブロックボックスは現在BODYブロックボックス）ですが、仕様は違い：

匿名ブロックボックスを生成する要素に設定されたプロパティは、[生成された匿名ブロック]ボックスとその要素のコンテンツに引き続き適用されます。たとえば、上記の例でBODY要素に境界線が設定されている場合、境界線はC1（線の終わりで開く）とC2（線の始点で開く）の周りに描画されます。

+--------------------------------------
| This is anonymous text before the P. 
+--------------------------------------
  This is the content of P.
 --------------------------------------+
  This is anonymous text after the P.  |
 --------------------------------------+

これは<BODY style="display: block; ">とは異なります：

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+
29
ax.

インラインコンテナにブロックコンテナを含めることはできません。このようなことが発生した場合の通常の結果は、インラインコンテナがその内容に対応するためにブロックに変換されることです。ブロックのように見えるものを含むためにインラインで表示されるコンテナーが必要な場合は、以下を使用します。

display: inline-block;

inline-blockプロパティは、子を​​そのような制約に制限することなく、コンテナ自体にのみ適用されるインラインコンテナの即時プロパティと定義を使用してコンテナをインライン方式で配置する表示モードです。その結果、親が定義を定義している場合、または親のディメンションがより大きな子に対応するように拡張される場合、インラインブロックの親のブロックコンテナの子は親のディメンションに制限されます。インラインブロックに設定されたコンテナは、インラインコンテナに関連付けられたデフォルトの位置を失うことなく、幅や高さなど、ブロックにのみ提供されるプロパティを受け取ることができます。

そのプロパティはFF2でサポートされていないため、IceWeaselブラウザーではサポートされていません。 IE6を含む他のほぼすべてのブラウザーがそのプロパティをサポートしているため、すぐに使用できるLinuxディストリビューションに限定された少数のユーザーを除いて、FF2またはIce Weaselを使用している人はほとんどいないため、このプロパティを使用しても問題ありません。

7
austin cheney

ついに違いがわかったと思いますが、根本的な違いがあります。

トップレベルの要素（例：<BODY>）がdisplay：blockで定義されている場合、次のようになります。

  • 要素に関連付けられたブロックがあります

  • このブロックには、匿名ブロック（テキストノードなど）と非匿名の子要素（<P>ブロックなど）が含まれます（つまり、そのブロックとして機能します）。

  • 最上位の要素のスタイル属性（例：パディングは、この包含ブロックに関連付けられています

トップレベルの要素（例：<BODY>）がdisplay：inlineで定義されている場合、次のようになります。

  • 要素に関連付けられた単一のブロックはありません

  • 要素のコンテンツ（匿名ブロックのテキストノード、および非匿名ブロックの子要素）には、最上位要素に関連付けられた包含ブロックがありますnot

  • 最上位の要素のスタイル属性（例：パディングは、そのインラインコンテンツに関連付けられています

1
ChrisW

定義されている正確なcssまたはブラウザによって異なる場合があります。

最も一般的には、2つの動作が見られます。

  • display:block要素内のdisplay:inline要素は、display:inlineをdisplay:blockとwidth:100%のように動作させます。

  • display:inlinedisplay:blockまたはfloat:left要素のみを含むfloat:right要素はスペースをとらず、内部に要素がないかのようになります。 display:block要素は、別のdisplay:block要素内にあるかのように機能し、positionによってはファンキーなアクションを実行する場合があります。

positionとfloatはどちらも、子要素に奇妙な動作をさせることがありますが、それらを回避すると、通常はinlineであるかのように機能します。

1
Esteban Küber