显示：块正在创建额外的填充？

Question

我有两个具有相同类的span标记，但是一个有一个额外的类，只添加display:block。问题是具有display:block样式的标记会创建额外的填充。如果将两个标签放在另一个旁边，则可以注意到填充大小的差异。有没有办法用display:block删除标签的额外填充？

这是jsFiddle

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

PS：在这个例子中，填充差异可以忽略不计，但在我的网站上，差异远大于此。

谢谢：）

Answer 1

是的，你是对的，这是由于盒子模型。使用 span，p 或只是设法更改块的高度。

另一个不推荐的答案是强行使用盒子模型。 见这个

box-sizing: content-box | 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/