CODEWITHSUNDEEP
cssgoogle-chrome
Bruno
Bruno

Reputation: 33

Chrome doesn't render span in div properly

When a span is nested in a div with a different background there's a small gap above and below it. FF doesn't render 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>

Does anyone has experienced this ?

Thanks PS: I'm running chrome 5.0.307.9 beta under Xubuntu 9.10

Upvotes: 3

Views: 7059

Answers (1)

Plynx
Plynx

Reputation: 11471

The problem is the default line-height. Browsers vary on how they define the default line-height ("normal") but many do make it a touch more than 1em (the default height of a span). 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;">

If you want to use a line-height greater than 1em, you'll need to mark the span display:inline-block in order to allow its background color to fill the height of the line rather than just the 1em of the inline span:

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

Upvotes: 7

Related Questions