1

The space between the first two lines is displayed smaller in my browser than the space between the last two lines:

* {
  all: unset;
  display: revert;
}
p {
  font-size: 28px;
  line-height: 28px;
}
span {
  font-size: 18px;
}
<p>
Hello, world!
</p>
<p>
Hello,
<span>world!</span>
</p>
<p>
Hello, world!
</p>

Just in case this doesn't look the same in every browser, here is a screenshot (it's only a few pixels, but visible to the naked eye):

Any ideas why this is the case? Setting the line-height of span to 0 seems to help. But I'd still like to understand what is going on.

fweth
  • 631
  • 6
  • 16
  • Yes it seems so, thanks a lot! Will close my question... – fweth Feb 16 '23 at 00:15
  • I think the TLDR of the answer is that the 'world!' part is not vertically aligned to be centered with Hello, as you can see the bottoms of the letters are roughly aligned even though world! is smaller. Since world! has inherited the same line height, but it's lower down on the page, a bit of that line height sticks out the bottom and pushes the next Hello World down. – NibblyPig Feb 16 '23 at 00:17

0 Answers0