アンカータグが高さと幅を継承しないのはなぜですか?

アンカー タグが含まれる要素から高さと幅を継承しない理由

開発者ツールでアンカー タグを検査すると、ユーザーは表示されているサイズとサイズの不一致に気づく場合があります含まれる要素の。この記事では、この動作の背後にある理由を詳しく説明します。

アンカー タグの表示: デフォルトでインライン

アンカー タグ () のデフォルトの表示値はインラインです。これは、コンテンツがテキスト内で流れ、テキストや埋め込み画像を含むそのコンテンツを収容するのに必要な幅のみを占めることを意味します。

高さ: フォント メトリクスによって決定されます

CSS 仕様では、次のように規定されています。 height プロパティは、アンカー タグのようなインラインの非置換要素には適用されません。代わりに、高さはフォント メトリックに基づいて決定されます。実際には、これはテキスト 1 行の高さに相当します。したがって、問題のアンカー タグの高さは 18px です。これは、画像サイズや周囲の div の高さの影響を受けることなく、テキストで使用されるフォント サイズに対応します。

Width: Sum of Content,間隔とマージン

非置換のインライン要素の場合、width プロパティも適用されません。代わりに、幅は要素の内容、パディング、境界線、余白に基づいて計算されます。

提供されたコードでは、最初のアンカー タグの幅は 144 ピクセルで、画像の幅 (110 ピクセル) の合計から得られます。 )、左マージン (20px)、および 2 つの 5px の境界線。同様に、2 番目のアンカー タグの幅は 310 ピクセルです。これは、広い画像幅 (280 ピクセル)、左マージン (20 ピクセル)、および 10 ピクセルの境界線から計算されます。

スペースの影響

です。スペースは計算された幅に影響を与える可能性があることに注意してください。この場合、アンカー タグはライン ボックス内にレイアウトされるため、最初のアンカー タグの終わりと 2 番目のアンカー タグの始まりのスペースのみが幅に影響します。最初のスペースの先頭と 2 番目のスペースの終わりにある他のスペースは削除されます。

要約すると、アンカー タグの高さと幅は、表示タイプと CSS により、含まれる要素から継承されません。インラインの非置換要素の仕様。それらの寸法は、フォント メトリック、コンテンツ サイズ、間隔、余白などの要素の固有のプロパティに基づいて決定されます。

以上がアンカータグが高さと幅を継承しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。