2

Why does a <span> of reduced font-size increase the line spacing?

Why does this HTML

<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi in <span>odio dictum, 
cursus augue sed, </span>dictum purus. Etiam 
accumsan quam et turpis elementum, in tempor. 
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi in odio dictum, cursus
augue sed, dictum purus. Etiam accumsan quam 
et turpis elementum, in tempor.</p>

and this CSS

p    {font-size: 16px; line-height: 24px}
span {font-size: 6px}

increase the space between the line containing the span and the following line?

How can I stop that?

(I have tried various combinations of line-height, without success.)

https://jsfiddle.net/mccaskey/xnf9pz3a/

JPM
  • 2,029
  • 2
  • 24
  • 27
  • adjust the line-height of the span also, decrease it less than the line-height of p.. I know why but I cannot explain it very well ... – Temani Afif Oct 14 '18 at 01:08
  • Hmm. It works if I make the line-height of the span less than the font-size of the surrounding text. Why? – JPM Oct 14 '18 at 01:22
  • honestly it's a bit complicated :) I won't find the correct way to explain it as me too I don't know all the tricks behind ... simply wait and you will get an answer ;) – Temani Afif Oct 14 '18 at 01:24
  • a hint that will probably help you is that the line-height is inherited so the span is also having 24px as line-height and the magic starts there – Temani Afif Oct 14 '18 at 01:26
  • 1
    See the [digression at the end of this answer](https://stackoverflow.com/questions/52282391/understanding-css2-1-specification-regarding-height-on-inline-level-boxes/52285183#52285183) – Alohci Oct 14 '18 at 01:37
  • @Alohci if we can *see* it, it will be nice .. we can only *read* it :p ... It would be perfect if we can have an illustration to really see those pixel of difference. – Temani Afif Oct 14 '18 at 01:49
  • This stuff is... complicated: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align – sol Oct 14 '18 at 01:53
  • 1
    @sol even that article doesn't say exactly why .. we can only read `As strange as it sounds, default baseline alignment may result in a higher (!) line-box` .. well, we need to read the article at least twice to probably get the calculation involved. – Temani Afif Oct 14 '18 at 02:08
  • I once gave an explanation [here](https://stackoverflow.com/a/21575694/1016716), does that help? In fact, it looks like this is a duplicate of that question. – Mr Lister Oct 14 '18 at 07:02
  • @MrLister yes, this is exactly the illustration missing from Alohci explanation in both answers ;) – Temani Afif Oct 14 '18 at 09:04
  • Thanks all. And especially thanks for that illustration, @MrLister! – JPM Oct 14 '18 at 14:13

0 Answers0