Why Do Anchor Tags Ignore Container Height But Respect Width?

Why Anchor Tag Ignores the Height and Width of Its Container

In HTML, anchor tags () often seem to disregard the height and width properties set for their containing elements. This can be observed by inspecting the size of such elements using developer tools, as illustrated in a provided JsFiddle.

Height Calculation

The CSS 2.1 specification dictates that the height of an anchor tag's content area is determined solely by its font metrics. As anchor tags default to inline display, they essentially wrap themselves around their contents. Thus, the height property does not apply to inline elements like anchor tags.

In the provided example, the single line of text within the anchor tags determines the height of 18px, regardless of the surrounding element's height specification.

Width Calculation

While anchor tags do not adhere to the height property of their containers, they do participate in the calculation of width. However, the width is determined by the elements' own contents, including padding, borders, and margins.

For the first anchor tag, the width is calculated as:

• Content width (image space): 114px
• Left margin: 20px
• Left and right borders: 2x5px
• Total width: 144px

Similarly, the width of the second anchor tag is determined as:

• Content width (image): 280px
• Left margin: 20px
• Left and right borders: 2x5px
• Total width: 310px

Moreover, spacing within the anchor tags' content affects the width calculation. Spaces at the start of the first tag and end of the second tag are omitted due to inline formatting, while spaces between them are collapsed into one. This one space contributes to the first tag's width but not the second.

The above is the detailed content of Why Do Anchor Tags Ignore Container Height But Respect Width?. For more information, please follow other related articles on the PHP Chinese website!