Display：block是否正在创建额外的填充？

Question

我有2个具有相同类的span标签，但其中一个有一个额外的类，它仅添加了display:block 。 问题在于具有display:block样式的标签会产生额外的填充。 如果您将两个标签一个接一个放置，您会注意到填充大小的差异。 有没有办法用display:block删除标签的多余填充？

这是一个jsFiddle

这是两个span标签的缩放图像，左边的是没有显示块的一个。 右边的一个显示：块。

PS：在此示例中，填充差异可以忽略不计，但在我的网站上，差异不止于此。

谢谢 ：）

Answer 1

是的，您是对的，这是由于包装盒型号引起的。 使用span，p或仅设法更改块的高度。

另一个不建议的答案是不要强行使用盒子模型。 看到这个

框大小：内容框| MDN

Answer 2

//test code
.redButton:after {
   color: #FFFFFF;
   content: ".";
   font-size: 73px;
   position: absolute;
   right: 3px;
   top: -53px;
   z-index: 100;
 }
.redButton {
   background-color: #FF0000;
   border-radius: 10px;
   display: inline;
   float: left;
   font-size: 44px;
   height: 20px;
   margin-right: 10px;
   position: relative;
  width: 20px;
}

Answer 3

使用<p>代替。 这是工作示例： http : //jsfiddle.net/46q9J/3/