这是一个非常短的小提琴，其中包括一个20px x 20px的“标尺”。我希望我的p标签高20px…10px文本，顶部和底部填充10 px（5px 5px）。
然而，它看起来大约是22px。
http://jsfiddle.net/BNnhp/30/
我已经重置了body标签，p标签和div标签，使用边距0px，填充0px和line-高100%。
以前我有一个类似的问题，通过设置行高为100%来修复……但是这在这里不起作用？
我想知道确切的原因-CSS属性和值。
但是出于测试目的，我点击了jsfiddle中的规范化框，这也没有效果。
在此处添加了更多重置：
http://jsfiddle.net/BNnhp/32/
我创建了一个小测试用例，但它在那里运行良好。所以，我回到你的答案，发现你将p的show值设置为inline，这导致了2px-3px的差异（固定版本）。要修复，请更改您的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;
}
/* ... */
您的font-size设置为10px的事实并不能保证高度也会是10px。一些特定的字母/符号比其他的高。
如果你把它改成，像这样说8px：
#hold_name{
font-size: 9px;
}
然后您会注意到容器大小也发生了变化。这是因为
标签调整自身大小以包含其中的文本。您可以为您的
它也会改变：
#hold_name{
font-size: 9px;
height: 10px;
}
这将设置包含的
结合顶部和底部的5px填充，总和为10px 5px 5px=20px高度。
在考虑其他答案的同时，您还可以更改. mena-drop的填充属性以匹配以下内容，然后添加20px的行高：
.menu_drop{
position: relative;
margin: 0;
padding: 0 10px; /* modified padding value */
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #bfddec;
color: #2875DE;
font: 11px arial;
line-height: 20px; /* new line-height property */
}
