All geek questions in one place

Chrome does not display span in div correctly

When a span is nested in a div with a different background, there is a small space above and below it. FF doesn't look like that.

Here is the html:

<html>
 <body>
  <div style="background-color:magenta">
   <span style="background-color:cyan">Nested</span>
  </div>  
  <div style="background-color:cyan">Can you see that magenta line ?</div> 
 </body>
</html>

Has anyone experienced this?

Thanks PS: I am running chrome 5.0.307.9 beta under Xubuntu 9.10

+3
source share
1 answer

The problem is the default value line-height. Browsers vary depending on how they determine the default line height ("normal"), but many do it more than 1 m (the default height for the range). Try explicitly setting the line height to 1em:

<span style="background-color:cyan;line-height:1em;">Nested</span>

or

<div style="background-color:magenta;line-height:1em;">

1em, display:inline-block, , 1-

<div style="background-color:magenta;line-height:2em;">
  <span style="background-color:cyan;display:inline-block;">Nested</span>
</div>
+7

Source: https://habr.com/ru/post/1734649/

More articles:


All Articles