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.
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.
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.
In order for line-height property to work, div should has display property equal to block
.app-button-label{ line-height: 20px; display: block; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With