Why, when I center the image in the div with the line height, does the 3px gap appear at the top?

Question

Check out this page . Images on the right should be centered within their div. But if you look carefully, there will be a small border about 3 pixels in size at the top. And if you disable overflow: hidden(via firebug or the equivalent of IE8), it gives the bottom.

HTML:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

And CSS is:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

What causes this mysterious gap? I checked the fields and additions and they don't seem to be a problem.

Answer 1

NB: I'm not quite sure that this explanation is correct, but it seems reasonable to me.

-, , :

"line-height" , . "line-height" . .

, . , "12px", "line-height" "14px", 2pxs : 1px 1px . ( , .)

. , div.small, , , div.small line-height, div.small. vertical-align, middle:

x- .

, ! . , .

, font-size: 0 . , 50 , - . vertical-align: middle, x- , . - .

Answer 2

, font-size:0; div . . - , ?

Answer 3

, , , , , font css, .

font: 11px/1.35em Verdana, Arial, Helvetica, sans-serif;

= . - font-size: 11px, line-height: px, font-family .., !