html - 在 P 元素中发现额外的 2px( fiddle )

Question

这是一个非常短的 fiddle ，其中包括一个 20px x 20px 的“标尺”。我希望我的 p 标签高 20px...10px 文本，顶部和底部填充 10px (5px + 5px)。

但是它看起来大约是 22px。

http://jsfiddle.net/BNnhp/30/

我已经使用 margin 0px、padding 0px 和 line-height 100% 重置了 body 标签、p 标签和 div 标签。

以前我有一个类似的问题，通过将行高设置为 100% 来解决......但是这在这里不起作用？

我想知道确切原因 - CSS 属性和值。

但出于测试目的，我单击了 jsfiddle 中的规范化框，这也没有任何效果。

在此处添加了更多重置:

http://jsfiddle.net/BNnhp/32/

Answer 1

我创建了一个 small test case ，但它在那里工作得很好。所以，我回到你的答案，发现你将 p 的 display 值设置为 inline，这导致了 2px - 3px差异(fixed version)。要修复，请按如下方式更改您的 CSS(查看评论):

/* ... */
#hold_name{
  padding: 5px 5px 5px 5px;
  /* position:relative; -- Don't need */
  /* top: 0px; -- Don't need */
  color:#000000;
  /* display:inline; -- Don't need */
  background: #ffffff;
  font-size: 10px;
  margin:0; /* Need to add */
  line-height:100%;
}
#hold_name:hover{
}
#wrap{    
  position: absolute;
  top: 20px; /* Change to 20px from 24px */
  visibility: hidden;
  margin: 0;
  padding: 0;
  border-left: 1px solid #007fa5;
  border-bottom: 1px solid #007fa5;
  border-right: 1px solid #007fa5;
}
/* ... */