25

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!

mtotowamkwe
  • 2,407
  • 2
  • 12
  • 19
user2649496
  • 353
  • 1
  • 3
  • 4
  • Post some code. Give the full context of how the HTML is structured for the text you're trying to adjust. Other than a `` is the text in any other element? A `

    `?

     – matthewpavkov Aug 09 '13 at 16:11

3 Answers3

43

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).

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
21

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.

Community
  • 1
  • 1
Shivam
  • 2,208
  • 3
  • 24
  • 39
  • 4
    you should probably explain to him why adding display block helps with the span. That would definitively make your answer much more useful. Hope you don't mind me suggesting. – sulfureous Aug 09 '13 at 16:15
  • 1
    And you shouldn't put `display:block` on a span. It serves no useful purpose, and I classify this as element abuse. Turn it into a div instead. – Mr Lister Aug 09 '13 at 16:27
  • 1
    Thanks! as it turned out, turning it into a
    made it work fine.
     – user2649496 Aug 09 '13 at 17:55
  • @user2649496 you are a day Savoir, by using `
    ` + `line-hieght:1 !important` solved my problem. I was using my text in `` tag but was not working so thanks
     – PatsonLeaner Oct 31 '19 at 11:41
1

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

benteh
  • 2,218
  • 4
  • 31
  • 41
  • I can't remove the line-height in the body as it applies to so many other elements. I need to over-ride it for this text...but thanks! – user2649496 Aug 09 '13 at 17:52
  • I tested it in webdev and it worked fine, but glad you have fixed it anyhow. – benteh Aug 09 '13 at 20:12