Why Don't Anchor Tags Inherit Height and Width?

Why Anchor Tags Don't Inherit Height and Width from Containing Elements

When inspecting anchor tags with developer tools, users may notice discrepancies between their displayed size and the size of the containing element. This article delves into the reasons behind this behavior.

Anchor Tag Display: Inline by Default

Anchor tags () have a default display value of inline. This means that their content flows within the text and occupies only the width necessary to accommodate its contents, including text and any embedded images.

Height: Determined by Font Metrics

The CSS specification states that the height property does not apply to inline, non-replaced elements like anchor tags. Instead, their height is determined based on the font metrics. In practice, this equates to the height of a single line of text. Therefore, the anchor tags in question have a height of 18px, which corresponds to the font size used in the text without being influenced by the image size or the height of the enclosing div.

Width: Sum of Content, Spacing, and Margins

For non-replaced inline elements, the width property also does not apply. Instead, the width is calculated based on the element's contents, padding, borders, and margins.

In the provided code, the width of the first anchor tag is 144px, resulting from the sum of the image width (110px), the left margin (20px), and the two 5px borders. Similarly, the width of the second anchor tag is 310px, calculated from the wider image width (280px), the left margin (20px), and the 10px borders.

Influence of Spaces

It's worth noting that spaces can affect the calculated width. In this case, since the anchor tags are laid out in a line box, only the spaces at the end of the first anchor tag and the start of the second one contribute to the widths. The other spaces, at the beginning of the first and end of the second, are dropped.

In summary, the height and width of anchor tags are not inherited from their containing elements due to their display type and the CSS specifications for inline, non-replaced elements. Their dimensions are determined based on the element's intrinsic properties, such as font metrics, content size, spacing, and margins.

The above is the detailed content of Why Don't Anchor Tags Inherit Height and Width?. For more information, please follow other related articles on the PHP Chinese website!