Skip to main content
Things are more complex than they seem.
Source Link
Leo B.
  • 22.3k
  • 6
  • 55
  • 167

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

.over { line-height: 0; margin-top: 0.5em; margin-bottom: -0.5em; }

<pre>FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>

Things are slightly trickier: the default line height is "roughly" 1.2em, so 0.6 and -0.6, or 50% and -50% of the current line height, will be likely better; however, line height may vary depending on the browser and the font, so the universal solution is still elusive.

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

.over { line-height: 0; margin-top: 0.5em; margin-bottom: -0.5em; }

<pre>FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

.over { line-height: 0; margin-top: 0.5em; margin-bottom: -0.5em; }

<pre>FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>

Things are slightly trickier: the default line height is "roughly" 1.2em, so 0.6 and -0.6, or 50% and -50% of the current line height, will be likely better; however, line height may vary depending on the browser and the font, so the universal solution is still elusive.

Added the HTML/CSS source.
Source Link
Leo B.
  • 22.3k
  • 6
  • 55
  • 167

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

.over { line-height: 0; margin-top: 0.5em; margin-bottom: -0.5em; }

<pre>FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

.over { line-height: 0; margin-top: 0.5em; margin-bottom: -0.5em; }

<pre>FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>
Source Link
Leo B.
  • 22.3k
  • 6
  • 55
  • 167

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result