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

Question

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

Where does that extra '6px' come from? How does this behavior fit to the standard?

http://stackoverflow.com/a/31445364/3597276 – Michael Benjamin Sep 05 '15 at 03:33 — Michael Benjamin, Sep 05 '15 at 03:33

score 35 · Accepted Answer · edited May 23 '17 at 12:34

35

@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

edited May 23 '17 at 12:34

Community

1
1

answered Jul 01 '11 at 04:24

sandeep

91,313
23
137
155

In addition, because the `img` element is inside an anchor (`a` element) it may have addional styles applied to it which cause the anchor to take more space than just the image alone. You may want to try `a img { border: none; } a:link {text-decoration: none; border: none}`. – Mikko Rantalainen Jul 01 '11 at 09:38
Thanks! Space for descending characters in inline elements! – Clyde Jul 02 '11 at 04:19
This was tripping me up this morning for far longer than I'd like to admit. Thanks for posting! – Ian Pitts Jan 03 '14 at 16:50

score 0 · Answer 2 · answered Jul 01 '11 at 04:27

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.

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

2 Answers2