repeating-linear-gradient spacing becomes out-of-sync - html

Question

I'm attempting to use repeating-linear-gradient to zebra-stripe a code block. To that end, I specified an explicit line-height in the code block and alternated the color at intervals of that value.
It works great for a few lines, but the text and stripes eventually stop lining up. Does anyone know why this is and whether it can be fixed?
pre {
font-family: monospace;
font-size: 12px;
line-height: 1.4em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1.4em,
#ddd 1.4em,
#ddd 2.8em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
but
eventually
the
lines
and
stripes
get
messed
up
and
this
makes
me
sad.</pre>

Answer 1

From w3.org:
On a block container element whose content is composed of inline-level
elements, 'line-height' specifies the minimal height of line boxes
within the element.
The keyword here being "minimal". If the font-size is large enough it will increase the spacing of your lines to more than your defined line-height.
To illustrate, here is your snippet with a smaller font-size:
pre {
font-family: monospace;
font-size: 10px;
line-height: 1.4em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1.4em,
#ddd 1.4em,
#ddd 2.8em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever
get
messed
up
and
this
makes
me
happy. :-)</pre>
Or here with a larger line-height:
pre {
font-family: monospace;
font-size: 12px;
line-height: 2em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 2em,
#ddd 2em,
#ddd 4em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever
get
messed
up
and
this
makes
me
happy. :-)</pre>