Need help with line-height property

dear forum members,

I’d really appreciate your advice on the utilisation of line-height property.
I’m trying to reduce space between two phones here: http://madebymaud.com/contact-3/

I used inline CSS on the page:

 <h3><span style="color: #808080; line-height: 1.1;">Mob. +<a href="tel:00320495737078"><span style="color: #808080;"> 32 (0) 495 73 70 78
</span></a>Agency + 32 (0)2 307 64 23</span></h3>
<a href="mailto:info@madebymaud.com"><span style="color: #333333;">info@madebymaud.com</span></a>
<h3><span style="color: #808080;"><span style="color: #808080;"> </span></span></h3>

What I’m doing wrong with this property because it doesnt work? I want to use percentage or em, and avoid pixels utilisation. Thank you very much in advance!

A span in an inline element by default, which thus doesn’t respond to line height. If you set it to display: block it will do what you want.

I’m sorry, I dont understand. You mean the span style prevent line-height from working? I need to add next to it <span style="display: block"> ?

Apply your line-height to the h3 parent and not the spans and the gap will close.

@PaulOB, thank you very much! just what I needed :slight_smile:

No. But one option was to add display: block to the span. E.g.

<span style=“color: #808080; line-height: 1.1; display: block;”>

However, since you want the line height to apply to the entire contents of the h3, then doing as Paul suggested is the better option. :slight_smile: