CODEWITHSUNDEEP
htmlwordpresscsspagelines
user2649496
user2649496

Reputation: 373

CSS: reducing line spacing of text?

I am having difficulty reducing the spacing between lines of text with CSS line-height (or height - I've tried both).

I have a small bit of text and the spacing is off. I've tried modifying the styles that (appear to) apply, and also enclosing the text in a <span>...</span> and explicitly declaring the style. Nothing seems to work.

The site is a Wordpress site using the Pagelines "lite" theme. The URL is http://stage.dsthree.com and the issue is on the front page (you can see it in the fourth column of text, just below the "email subscribe" box in the small text - the line spacing for that text is off. This site will not allow me to post a screenshot, as I am new here.

I've reduced the line-height to 1% and to 1px to no effect.

Any help, directions or suggestions on how to reduce the whitespace is much appreciated!

Upvotes: 27

Views: 69246

Answers (3)

Mr Lister
Mr Lister

Reputation: 46619

Inline elements don't honour properties such as line-height; they take on the line height of the nearest block parent.

See Fiddle

Solution: remove the line-height from the body, or turn the span into a block (i.e. make it a div; don't give display:block to the span).

Upvotes: 45

Shivam
Shivam

Reputation: 2258

Add display:block & remove height.

<span style="font-size: 75%; line-height: 16px; display:block">blog posts & occasional updates (updates max 1 every 14 days)</span>

You learn more about display:block property here.

Upvotes: 21

benteh
benteh

Reputation: 2298

You have a line-height: 21px; In the body. Remove this, and it should work.

Upvotes: 2

Related Questions