Why CSS Line-Height Might Refuse to go any Lower

October 3rd, 2014 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

I had an issue recently whereby I was trying to set the CSS line-height property of some text but it just would not go lower than a certain amount, even when setting it to, for example, 1 pixel. Making the line height larger however would increase the vertical space between the text.

The code I was using was as follows:

HTML:

<span id="mySpan">This is the text that I want to apply line-height on.</span>

CSS:

#mySpan { font-size:16px; line-height:10px; }

The Solution
I couldn’t find any reference to similar issues on the web after a bit of Googl’ing, so started to play around with the code.

It turns out the reason I couldn’t go lower than a certain line-height was because I was trying to do so on an inline element, in my case a <span> tag.

Changing to an element with display block, such as a <div>, or setting the ‘display‘ CSS property to ‘block‘ or ‘inline-block‘ then meant I could set the line-height as low as I wanted.

Tags: ,
This entry was posted on Friday, October 3rd, 2014 at 4:05 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first