Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?

Question

I have a paragraph tag that I defined elsewhere with a line height of 15px, and I have another paragraph tag further down the page where I want to make the line height around 10

Answer 1

After testing this in IE 8-11, Firefox 38.0.1, and Chrome 43, the behavior is the same: inline elements have a minimum line-height that they won't go below. It appears this minimum height comes from the CSS spec:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

If you want to maintain some benefits of inline elements, you can use display: inline-block. You can also use display: block. Both will allow you to make the line-height whatever you want in all the browsers I tested.

Two related questions for more reading:

why the span's line-height is useless

The browser seems to have a minimum line-height on this block that contains text. Why?