Why is the height of a 'div>a>img' larger than the size of the wrapped img?

If I set the img's size to 100*100, the containing div will be like 100*106.

Wh开发者_高级运维ere does that extra '6px' come from? How does this behavior fit to the standard?

@clyde; yes this is a natural behavior of image because img is an inline element so user agents leave some space for descender characters.

you can remove it with css:

img { display:block; } or img { vertical-align:bottom; }

FOR MORE CHECK THESE

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Unwanted padding-bottom of a div

I think we need more code, especially CSS styles, but essentially the cascading part of CSS can easily flow inherited sizes downwards. If your A has a style of some extra padding or margin, then your final DIV will get it, too. And A is an inline element which often adds padding in anticipation of more content; turning A's to blocks often solves these kinds of issues, so I would try that first.