Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

em

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.

like image 721
daGUY Avatar asked Oct 12 '12 03:10

daGUY


People also ask

How do I change font size and line height?

Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.


2 Answers

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.

like image 110
Ibu Avatar answered Oct 10 '22 17:10

Ibu


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

.app-button-label{     line-height: 20px;     display: block;  } 
like image 36
Ramesh Vishnoi Avatar answered Oct 10 '22 15:10

Ramesh Vishnoi