81

http://jsfiddle.net/mJxn4/

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.

4
  • 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
    Commented Oct 12, 2012 at 3: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
    Commented Oct 12, 2012 at 3:36
  • @mtr The OP already said it was possible to increase it, just not decrease it.
    – Daedalus
    Commented Oct 12, 2012 at 3:37
  • 1
    Related: stackoverflow.com/questions/7424867/…
    – Ray Toal
    Commented Oct 12, 2012 at 3:37

7 Answers 7

138

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.

4
  • 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
    Commented Oct 12, 2012 at 3:37
  • the default line-height is set to auto.
    – Ibu
    Commented Oct 12, 2012 at 3: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
    Commented Oct 12, 2012 at 3:39
  • 21
    Wow, I've been working with CSS for a long time and did not know that. Commented Jul 16, 2018 at 16:04
61

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

.app-button-label{
    line-height: 20px;
    display: block;
 }
1
  • 5
    display: inline-block, of course, also works (better for some designs)
    – eon
    Commented Aug 22, 2018 at 19:11
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

0
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/

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/

0

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.

-2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.