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 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?

have you tried something like `{line-height: 0.75em}` it works fine for me. — Nathan, Sep 15 '11 at 01:36
Agreed, mhenry's answer definitely deserves the win on this. — ConorLuddy, Feb 02 '15 at 12:03

mhenry1384 · Answer 1 · 2012-08-31T19:03:23.513

80

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.

edited Aug 31 '12 at 19:03

answered Aug 31 '12 at 18:55

mhenry1384

7,538
5
55
74

14

Right on. If you have a `span`, for example, setting it to `display:block` solves this issue. Although I wonder if this is an intended feature of the html5 standard. It seems very messy to me. – alex Oct 24 '12 at 09:24
2

This should be the approved answer. Realizing this solved my problem. – Eric K Aug 14 '14 at 13:31
That's too bad, I want a tighter line-height while keeping `display:inline` and HTML5. Any other ideas maybe? – JacobF Jan 23 '15 at 09:36
`display: inline-block;` also works, at least on Chrome, and preserves the best of `display: inline;` and `display: block;`, including this feature. – Dave Land Jan 11 '19 at 20:56
2

This is a perfect example why answers with highest number of upvotes should appear above accepted answer. – Slaven Semper May 14 '19 at 07:19
I'd assume this behaviour is because `line-height` makes more sense on block-level elements. It would be inapplicable to only a specific section of a paragraph. In my case I had an `` tag inside of a `
` and setting `line-height` on the `` had no effect. The working solution was to set it on the enclosing `
` element.
– Alex Walker Sep 20 '19 at 15:09

score 30 · Answer 2 · edited Mar 08 '13 at 00:12

30

I ran into the same issue, worked well with:

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

edited Mar 08 '13 at 00:12

Adam Elsodaney

7,722
6
39
65

answered Mar 07 '13 at 23:52

Nitish

307
3
3

score 6 · Answer 3 · edited May 23 '17 at 11:54

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?

score -11 · Accepted Answer · answered Sep 15 '11 at 01:40

-11

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

answered Sep 15 '11 at 01:40

Andres I Perez

75,075
21
157
138

6

False, you can set `line-height: 0.5` and your text will overlap. You can even set it to `0`. – Scott Rippey Jan 15 '13 at 22:56

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

4 Answers4

Linked