是行高度属性是从主体继承的

Question

我有一些html如下 - 没什么特别的 - 只是一个div和一个跨度

<div id="container">Some text to affect the width</div>
<span>A</span>

我正在使用eric meyer's css reset。他正在做的一件事是将主体的行高设置为1.此外，他正在设置字体：inherit;对于每个元素。

然后，我对上面的html元素有一些其他样式如下：

body{background:#912FFF}
    #container{background-color:#EDC1C1; width:150px;}
    span{background-color:#35D9C4;}

小提琴：http://jsfiddle.net/probosckie/5pb4794u/

问题是我的跨度与div重叠。如果我放大页面，那就更加明显了。

我猜测是行高设置为1而字体设置为继承是搞乱这个问题。有人可以确认吗？

Answer 1

不幸的是，内联元素的填充和边距不是为精确的像素布局而设计的，而是针对文本流而设计的。在这种情况下，您应该使用div而不是span元素，或者将span放在div中。

Answer 2

在line-height:normal;元素中设置body。将行高设置为低于文本高度的值将导致重叠。