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

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 10px. Funny thing is, it won't let me get down to 10px or anything smaller than that, but when I set it to 25px or higher, the line-height property seems to be working.

I checked the relevant CSS (all hand-coded) via the Chrome browser's web developer tools (Chrome's version of Firefox's Firebug) and co开发者_JAVA百科uldn't find anything relevant. Is there a common CSS bug that prevents me from shrinking the line-height beyond a certain minimum amount?

---

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.

---

I ran into the same issue, worked well with:

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

---

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?

---

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