アンカー タグがそれに含まれる要素の寸法を継承しないのはなぜですか?

アンカー タグの寸法

アンカー タグは、デフォルトでは、それに含まれる要素の寸法を想定しません。これは、Web ページ上での要素のレイアウト方法を規定する CSS 2.1 仕様で説明されています。

非置換インライン要素

アンカー タグ () は、置換されないインライン要素とみなされます。インライン要素はテキスト行に沿って流れ、通常、固有の幅や高さはありません。

高さの計算

非置換インライン要素の場合、「高さ」プロパティは適用されません。高さは通常、要素のコンテンツのフォント メトリックによって決まります。提供された例では、高さは 18 ピクセルで、アンカー内に含まれるテキストのサイズによって決まります。

幅の計算

「width」プロパティも同様です置換されていないインライン要素には直接適用されません。幅は、要素のパディング、ボーダー、マージン、コンテンツに基づいて計算されます。

画像コンテンツ

アンカー タグ内の画像は幅の計算には影響しません。 。これは、インラインの非置換要素の幅は、そのコンテンツ サイズの影響を受けないためです。

Margin Collapse

インライン コンテキスト内のアンカー タグ間のスペースは、マージンの折りたたみに続きます。ルール。この場合、アンカー タグ間の連続したスペースは 1 つのスペースに折りたたまれます。最初のアンカーの終端のスペースは幅に影響しますが、2 番目のアンカーの始点のスペースは影響しません。

計算例

最初のアンカータグの幅は 114px (画像スペース) 20px (左マージン) 10px (左右の境界線) = 144px.

2 番目のアンカー タグの幅は 280px (画像) 20px (左マージン) 10px (左右の境界線) = 310px.

結論

アンカー タグは非置換インライン要素であるため、高さまたは高さを継承しません。含まれる要素の幅。それらのサイズは主に、独自のコンテンツ (テキスト)、パディング、境界線、マージン、およびインライン コンテキストでのマージン折りたたみルールの適用によって決まります。

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