Menu
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
485
asked Mar 17 '26 14:03
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
