Why can't I decrease the line-height of this text?

Question

This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px.

The CSS in question is:

#others .item em {
    font-size: 13px;
    line-height: 17px;
}

Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.

Why would this be? No line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.

I started with local HTML/CSS first; then I extracted just the piece that I was having the issue with and posted on JSFiddle, and that appears the same way. Could it be the browser? I'm using Safari. — daGUY, Oct 12 '12 at 03:35
I think, it's working fine, you can put the line-height: 40px to see the different since with font-size: 13 and line-height: 17, it looks similar. — Osify, Oct 12 '12 at 03:36
@mtr The OP already said it was possible to increase it, just not decrease it. — Daedalus, Oct 12 '12 at 03:37
Related: http://stackoverflow.com/questions/7424867/why-isnt-the-css-property-line-height-not-letting-me-make-really-tight-line-s — Ray Toal, Oct 12 '12 at 03:37

score 127 · Accepted Answer · edited Sep 15 '16 at 20:49

127

Because the em tag is inline and its line-height cannot be lower than its parent div.

For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.

edited Sep 15 '16 at 20:49

thanksd

54,176
22
157
150

answered Oct 12 '12 at 03:35

Ibu

42,752
13
76
103

But the parent (`#others .item`) doesn't have a `line-height` in my example. Does it just go by the browser default `line-height` then? – daGUY Oct 12 '12 at 03:37
the default line-height is set to auto. – Ibu Oct 12 '12 at 03:39
Ah, you're right: by specifying a lower `line-height` on the parent, I can lower the `em`'s `line-height` to that same value. – daGUY Oct 12 '12 at 03:39
19

Wow, I've been working with CSS for a _long_ time and did not know that. – MarkPraschan Jul 16 '18 at 16:04

score 53 · Answer 2 · answered Jun 19 '17 at 11:49

53

In order for line-height property to work, div should has display property equal to block

.app-button-label{
    line-height: 20px;
    display: block;
 }

answered Jun 19 '17 at 11:49

Ramesh Vishnoi

1,299
1
12
19

5

display: inline-block, of course, also works (better for some designs) – eon Aug 22 '18 at 19:11

score 14 · Answer 3 · edited May 23 '17 at 12:26

14

I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?

Hope this helps anyone else facing the same problem in future

edited May 23 '17 at 12:26

Community

1
1

answered Apr 28 '16 at 05:17

Grace

247
2
9

jrd1 · Answer 4 · 2012-10-12T03:43:07.700

0

You seem to be using normalized css option in jsfiddle - which equates to the CSS rules being reset - ala http://meyerweb.com/eric/tools/css/reset/

You can either reset the reset, or use a different reset if you really need it.

See here for more details:

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

edited Oct 12 '12 at 03:43

answered Oct 12 '12 at 03:35

jrd1

10,358
4
34
51

score 0 · Answer 5 · answered Oct 12 '12 at 05:26

0

The best way to do it is using css reset.

Write your own or use popular one like

http://meyerweb.com/eric/tools/css/reset/

answered Oct 12 '12 at 05:26

score 0 · Answer 6 · answered Nov 12 '22 at 07:18

Yes, the block level elements(h1, h2, h3...h6,div) sets the minimum line-height for its inline children elements(span, em etc.). Which means if there is a element inside (with line-height 1.5), then the can set minimum line-height of 1.5 and no less than it.

score -2 · Answer 7 · answered Mar 25 '15 at 12:52

The simplest way is to specify the line height with a higher priority, for example you could write: line-height: 14px !important;

If it is still not working set high priority in both where you u would like to decrease the line height (inline css) and also put in the body css .. remember the high priority (!important;) because it overrides any other unknown css rules.

Hope this helps

Ahmed

Why can't I decrease the line-height of this text?

7 Answers7

Linked