Additional 2px found in P element ( short fiddle ) - html

Question

Here is the pretty short fiddle which includes a 20px by 20px "ruler". I expect my p tag to be 20px high...10px text, and 10 px for the top and bottom padding (5px + 5px).
However it looks to be about 22px.
http://jsfiddle.net/BNnhp/30/
I have reset the body tag, the p tag and the div tag using margin 0px, padding 0px and line-height 100%.
Previously I had as a similar issue that was fixed by setting line-height to 100%....however this is not working here?
I want to know the exact cause - CSS attribute and value.
But for testing purposes I clicked the normalize box in jsfiddle and this had no effect either.
Added in more resets here:
http://jsfiddle.net/BNnhp/32/

Answer 1

I created a small test case, but it worked fine there. So, I went back to your answer, and found you were setting p's display value to inline, which was causing the 2px - 3px difference (fixed version). To fix, change your CSS as follows (look at comments):
/* ... */
#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;
}
/* ... */

Answer 2

The fact that your font-size is set to 10px doesn't promise you that the height would also be 10px. Some specific letters/symbols are higher than others.
If you change it to, say 8px like this:
#hold_name{
font-size: 9px;
}
then you will notice the container size changes as well.
This is because the tag re-sizes itself to contain the text inside.
You could set a specific height for your as well and it would change:
#hold_name{
font-size: 9px;
height: 10px;
}
and that would set the containing <p> element to a height of 10 pixels, no matter what the font-size is.
combining with the 5px padding on top and bottom, it would sum to 10px + 5px + 5px = 20px height.

Answer 3

While taking the other answers into consideration, you can also change the padding attribute of .menu-drop to match the following, then add a line-height of 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 */
}