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.
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:
Similarly, the width of the second anchor tag is determined as:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
