why space below img

Why HTML and CSS is a fucking stupid idea for layout.

when you have an img inside a div, you get additional whitespace below the image.
that has nth to do with padding.

The reason:
by default img tag is a inline tag.
You have to make it a block tag.

But in finding out, wasting time.
Web layout resources should all just be like MFC or VB layouts, where you drag and drop and the runtime renders things exactly where you expect, only that in this case, the runtime = the browser.

But anyway...

why space below img
http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image

By default, an image is rendered inline, like a letter.

It sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like f, j, p and q.

You can adjust the vertical-align of the image to position it elsewhere.

Why an image inside a div has an extra space below the image?

Reason, but not best answer.

Best answer below: make the img tag inside a div, give it the style display:block;

http://stackoverflow.com/questions/7774814/remove-white-space-below-image

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:

.youtube-thumb img { display: block; }

Remove white space below image