從身體

Question

繼承了線height屬性我有一些HTML作爲如下─什麼fancy-只是一個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

在您的body元素中設置line-height:normal;。將行高設置爲比文本高度更低的值會導致重疊。

Answer 2

不幸的是，行內元素的填充和邊距不是爲精確的像素佈局而設計的，而是針對文本流的。在這種情況下，您應該使用div來代替span元素，或者將span放在div中。