HTML & CSS · Middle · Question 66 of 75

Why is there a small gap under an `<img>` inside a `<div>`?

✓Correct answer: Images are inline and sit on the text baseline, leaving room for descenders; use display: block or vertical-align: middle
2Browsers add a default margin-bottom to images
3The image file has transparent pixels at the bottom

Explanation

The space below the baseline is reserved for letters like "g" and "y". Most CSS resets set img { display: block; } for this reason.

Further reading

Test yourself

Take the HTML & CSS · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.