Why can't you set line-height on an anchor element with a background? [duplicate]

Question

I've only just realised that anchor tags with a background will only inherit their line-height and you can only set it directly by setting the anchor to display: inline-block;

Why is this?

http://jsfiddle.net/moefinley/3H3y5/

ul li a {
    display: inline-block;
    line-height: 20px;
}

Answer 1

Here is root cause :

content-area = in non-replaced elements, the box described by the font-size of each character in the element, strung together; in replaced elements, the intrinsic height of the element plus any margins, borders, or padding

inline box = the addition of (half-)leading to the content-area for each element; for non-replaced elements, the height of the inline box of an element will be exactly equal to the value for line-height; for replaced elements, the height of the inline box of an element will be exactly equal to the intrinsic height of the element plus any margins, borders, or padding

line-box = the box which bounds the highest and lowest points of the inline boxes which are part of the line

The following behaviors fall out of this description:

1. the background of an inline element is applied to the content-area plus any padding
2. margins and borders on replaced elements affect the height of the inline box for that element, and by implication the height of the line-box for that line

So your line-height for a with background works fine only when you mark it as block element using inline-block. And with default behavior it will just stretch the line height without stretching background.