问题
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 couldn't find anything relevant. Is there a common CSS bug that prevents me from shrinking the line-height beyond a certain minimum amount?
回答1:
line-height is relative to font-size, you can't go any lower than that unless you declare negative margin.
回答2:
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.
回答3:
I ran into the same issue, worked well with:
.element { display: block; line-height: 1.2; }
回答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?
来源：https://stackoverflow.com/questions/7424867/why-isnt-the-css-property-line-height-letting-me-make-tight-line-spaces-in-ch