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

I've noticed in both Firefox and Chrome that if you set the HTML5 doctype there's a minimum line-height for inline elements. For block elements you can set the line-height to whatever you want, even make the lines overlap.

If you don't set the HTML5 doctype, there's no minimum line-height for either block or inline elements.

Answer 2

I ran into the same issue, worked well with:

.element { display: block; line-height: 1.2; }

Answer 3

line-height is relative to font-size, you can't go any lower than that unless you declare negative margin.

Answer 4

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?