CSS ではアンカー タグ () のサイズはどのように計算されますか?

) CSS で計算されますか? " />

アンカー タグのサイズ計算について

アンカー タグ () は、他のページへのリンクを作成するためによく使用されます。デフォルトでは、インライン要素は、その要素を含む要素の高さと幅を継承しないため、開発者の間で混乱が生じています。この記事では、この動作の背後にある理由を調査し、サイズがどのように変更されるかを説明します。

インライン要素とコンテンツ領域

CSS 2.1 仕様では、アンカー タグなどのインライン要素がコンテンツ フローの一部を形成し、独自のブロックレベルのボックスを作成しないでください。コンテンツ領域の高さと幅は、フォント サイズ、テキストの内容、スタイルなどの要素に影響されます。 element.

高さの計算

アンカー タグのような非置換インライン要素の場合、CSS 仕様では通常、ブラウザーが高さを計算する方法を明示的に定義していません。フォント メトリクスに基づいて計算すると、高さは 18 ピクセルとなり、1 行のテキストを表します。高さは、画像や周囲のブロック要素のサイズには影響されません。

幅の計算

インライン要素の幅は、コンテンツ、パディング、要素自体の境界線とマージン。アンカー タグの場合、幅は次のように計算されます。

Content Width + Margin (Left) + Border (Left and Right)

提供された JsFiddle では、最初の の幅は次のように計算されます。要素は 144 ピクセルで、画像の幅 (114 ピクセル)、左マージン (20 ピクセル)、左右の境界線 (それぞれ 5 ピクセル) で構成されます。同様に、2番目のの幅は、要素は 310 ピクセルで、コンテンツの幅 (280 ピクセル)、左マージン (20 ピクセル)、左右の境界線 (それぞれ 5 ピクセル) によって決まります。

スペース処理

の場合インライン要素は水平にレイアウトされ、それらの間のスペースは次のように処理されます:

• 先頭最初の要素のスペースは無視されます。
• 最後の要素の末尾のスペースは無視されます。
• 折りたたまれたスペース: 隣接する要素間のスペースは 1 つのスペースにマージされ、最初のスペースは保持されます。

JsFiddle の例では、最初の の末尾にある折りたたまれたスペースは、要素はその幅に寄与しますが、2 番目の の先頭にある折りたたまれたスペースは幅に影響します。要素は幅に影響しません。

これらの CSS 原則を理解することで、開発者は Web ページ内のアンカー タグのレイアウトとサイズをより適切に制御できます。

以上がCSS ではアンカー タグ () のサイズはどのように計算されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。