コンテンツ ボックスの高さはブロック要素とインライン要素でどのように異なりますか?

ブロック要素とインライン要素のコンテンツ ボックスの高さの決定

「コンテンツ ボックス」の概念は、コンテンツ ボックスの概念は、テキストと要素の内部コンテンツが含まれます。望ましいレイアウトを実現するには、高さを決定することが重要です。

ブロック要素

ブロック要素の場合、コンテンツ ボックスの高さは 2 つのシナリオに依存します。

• インライン書式設定コンテキスト (IFC): 要素が IFC を作成するとき、高さは行ボックスによって制御されます。行の高さは各行ボックスの高さを定義し、これらが集合的にコンテンツ ボックスの高さを決定します。これは

  のような要素に適用されます。
• ブロック フォーマット コンテキスト (BFC): BFC では、高さはブロックの子要素の存在、そのマージン、および潜在的なマージンの折りたたみによって決まります。ブロックの子がある場合、高さはそれらを含むように拡張されます。ブロックの子がない場合、高さはゼロになります。

インライン要素

ブロック要素とは対照的に、インライン要素は同じルールに従いません。コンテンツボックスの高さ用。この仕様では、高さの決定を意図的にユーザー エージェント (ブラウザー) に任せています。コンテンツ領域のサイズは、使用されるフォントに基づきます。

ユーザー エージェントは高さを柔軟に定義できますが、通常は次のような要素を考慮します。

• Em -box Height: コンテンツ領域の高さは、em-box に基づいて、行の高さに関連した一貫した背景スタイルを確保できます。
• グリフのアセントとディセンダー: または、高さはフォントの最大アセンダとディセンダによって定義され、em ボックスの上または下に広がるグリフに対応します。

インライン要素は通常、高さのプロパティに従わないことに注意することが重要です。 。明示的な高さを設定しようとしても、コンテンツ領域のサイズに影響を与えない可能性があります。

以上がコンテンツ ボックスの高さはブロック要素とインライン要素でどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。