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;
}
/* ... */