0

When putting inline-element inside inline-element, the child just fits correctly, for example:

<span style="background-color: lightblue;">Pre <span style="background-color: tomato;">Some text</span> Next</span>

Thing does not go well with inline-elements being inside block elements, for example:

<div style="background-color: lightblue;">Pre <span style="background-color: tomato;">Some text</span> Next</div>

Here if you zoom your viewport, you will notice some sort of margin/padding at the top and bottom of the child.

Can someone explain, why we get this result?

enter image description here

I am zooming with 500%

I also tested that with a W3School interpreter, and the problem is still

Ouroborus
  • 16,237
  • 4
  • 39
  • 62
Learning
  • 72
  • 8
  • can you share screenshot with issue, not seeing any difference from the code sample - https://codepen.io/nagasai/pen/KKBBxaZ?editors=1010 – Naga Sai A Jan 30 '23 at 05:13
  • Thanks for your reply @Naga Sai A, yes I will edit my question with pleasure – Learning Jan 30 '23 at 05:38
  • I'm not able to reproduce this in Firefox – Ouroborus Jan 30 '23 at 05:47
  • 1
    Will depend on your browser and default font-family but that's due to the `line-height: normal` default value of the parent element, which should roughly be around `1.2` on desktop (if we trust MDN). You can force it to `1` if you want it to take the whole size of your inline element, or you can set your inline element `display: inline-block` so that it grows to the parent's line height. – Kaiido Jan 30 '23 at 05:51
  • Thanks @ouroborus, I tested that in: firefox 107, firefox 89 and chrome 89, two computers and I got the same result, please do you zoom to 500%? because you cannot see it in normal text. – Learning Jan 30 '23 at 05:54
  • Thanks @Kaiido, I think the font-family used is: Time new roman, at 16 pixels, the browsers tested are above in comment, and I think you got the issue figured out, thank you mate)), i will vote you up)) – Learning Jan 30 '23 at 05:59
  • I did. [Results](https://i.imgur.com/Hx2Z8JY.png) – Ouroborus Jan 30 '23 at 06:00
  • Thanks @Ouroborus, my brain spins really fast, If we use the same browser, how can we get different results?, the problem btw, is fixed, and that's due to the line-height, but still do not know why we get two different result, anyway, thank you all for the help)) – Learning Jan 30 '23 at 06:05

0 Answers0