アンカー タグが親コンテナからディメンションを継承しないのはなぜですか?

アンカー タグ: コンテナからディメンションを継承しない理由

Web ページをレンダリングするとき、アンカー タグのサイズがわかりにくい場合があります。アンカー タグは、明示的な高さと幅を持つ要素内に含まれているにもかかわらず、多くの場合、それらの寸法を継承できません。この動作を明確にするために、CSS 仕様を詳しく調べて、その背後にある仕組みを調べてみましょう。

CSS 仕様

CSS 2.1 仕様によると、ボックスのコンテンツ領域の寸法 (幅と高さ) ) は、生成要素に「width」または「height」プロパティが設定されているかどうか、ボックス内のテキストまたは他のボックスの存在、テーブル固有の要素など、さまざまな要因の影響を受けます。

アンカー タグ表示プロパティ

デフォルトでは、 (anchor) タグはインライン表示値を持ちます。インライン要素は、そのコンテンツとともに、ページのレイアウトに直接関与します。この非置換要素の性質は、その寸法の決定方法に影響します。

高さの計算

アンカー タグのようなインラインの非置換要素の場合、「高さ」プロパティは適用されません。代わりに、CSS 仕様で説明されているように、コンテンツ領域の高さはフォントに基づきます。指定された例では、アンカー タグの高さは 18 ピクセルで、画像内の 1 行のテキストから導出されます。画像の内容もコンテナの高さも影響しません。

幅の計算

「幅」プロパティも、インラインの非置換要素には適用されません。幅は、アンカー タグのコンテンツ、パディング、境界線、およびマージンによって決まります。最初のアンカー タグの場合、幅は次のように計算されます:

Width = content (114px) + left margin (20px) + left and right borders (10px) = 144px

2 番目のアンカー タグの場合:

Width = content (280px) + left margin (20px) + left and right borders (10px) = 310px

スペースの処理

さらに、スペースの処理は幅の計算。インライン コンテキストでは、先頭 (左端) と末尾 (右端) のスペースは破棄され、間にあるスペースは 1 つのスペースに折りたたまれます。これは、アンカー タグの幅にスペースが追加される可能性があるため、幅の計算に影響します。

以上がアンカー タグが親コンテナからディメンションを継承しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。