Extra height on the wrapper when img is not a block element?

Question

I thought I understood how the built-in and blocking elements work, but it left me alone. I found a fix for the problem, however I have no idea why this works .

For some reason, if you have img inside a div , the div looks like 3.5px above the image. However, if you set the image as a block element, this extra height will disappear.

Basic HTML:

 <div id="wrapper"> <img src="http://www.basini.com/wp-content/uploads/2013/02/seeing-in-the-dark.jpg" width="300" height="230" /> </div> 

And CSS:

 #wrapper { background: orange; } #wrapper img { /* display: block; this will remove the extra height */ } 

I installed jsfiddle to demonstrate the effect

Why is this happening and why does the "img" block element make this fix? Are there any other solutions?

Answer 1

By default, the image is displayed in a line as a letter.

He sits on the same row as a, b, c, and d.

Under this line there is a space for descenders, which you will find in letters such as j, p and q.

You can adjust the vertical alignment of the image to place it elsewhere.

Answer 2

This is due to the line-height img tag wrapping div .

To fix this, you can set line-height:0 to div, float img or display:block img.

Better to explain: How to control line height in <p> stylized as inline

Answer 3

Have you tried resetting all styles ? before applying new styles?