Unexpected padding/margin in div

Question

I have images in a div while setting all margins and paddings to 0. I still get a little gap below the images inside the div. Why is the div larger than the images?

See this jsfiddle: http://jsfiddle.net/n6bz4tye/

Same effect in FF32 and Chrome 37.

I know, I can use negative margins/paddings to solve this, but I'd like to know, what's happening and why it behaves like that.

Answer 1

To get this clear: Take the letters A B C D. All straight , nothing goes over the bottom, nothing over the top. Now if you take the letter g y j, etc. You have some spacing on the bottom.

By standard all images are rendered as "vertical-align:baseline". And that is why there is this small room on the bottom. The images are positioned where the normal letters would go. On line with A B C D.

Take your fiddle and inside of the div "images" add after the last img "A and g". You will see that g will fill out all the space to the bottom.

Answer 2

An image is an inline element by default, like a letter and there is space below that line for the descenders that you find on letters and the default vertical alignment of an inline element (in your case the image) is baseline and you can adjust the vertical-align of the image to position it elsewhere.

You could remove the below space by set vertical-align: middle; to .images img

JSFiddle - DEMO

.images img {
  width: 100px;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}

You could also reset this behavior globally by set vertical-align to img

img {
    vertical-align: middle;
}