display: inline issue with line height: too much spacing between lines at small browser dimension

Question

I have 2 "span" blocks of text, which I want to "merge together" using display: inline. However, I want the line height to be consistent regardless of the browser size. For the font size, I'm using "vw" units, since I want it to scale according to the browser width.

https://jsfiddle.net/darrengates/jpLaf683/

When viewed at a large dimension (e.g. 1200px), the text looks fine, i.e:

this is the first block this is the first block this is the first block
this is the first block this is the first block this is the first block
this is the first block this is the first block this is the first block
this is the first block this is the second block... (etc.)

However, when the browser is sized to a very small dimension (e.g. 500px), the spacing between the lines starts to look very large. In fact, it seems like there is a whole line space between lines, for example:

this is the first block this is the first block this is the first block

this is the first block this is the first block this is the first block

this is the first block this is the first block this is the first block

this is the first block this is the second block... (etc.)

What I want it to do is scale the font down to a very small size, but keep the line spacing so that it looks consistent regardless of browser size. Assume that I cannot change the HTML itself, but must do this with CSS only. Also assume that I have to use VW units for the font size.

May be of help: https://stackoverflow.com/questions/28363186/inline-elements-and-line-height — sol, Mar 10 '18 at 01:48
Adding font-size: 3vw to the div didn't do anything. I also tried adding line-height: 3vw to the div, but the result was the same. — Darren Gates, Mar 10 '18 at 02:55
I noticed that other stackoverflow question (and comments), but it wasn't clear to me how I would modify my code to fix it. — Darren Gates, Mar 10 '18 at 02:59

score 6 · Answer 1 · answered Mar 10 '18 at 06:54

It appears that using

line-height: 0

in the parent container allows me to set individual line-height values in the child inline containers. Here an example of something that works for me at all screen dimensions:

https://jsfiddle.net/darrengates/L85xke8b/

display: inline issue with line height: too much spacing between lines at small browser dimension

1 Answers1