Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
in Web Technology by (20.3k points)
edited by

Why in the following code the height of the div is bigger than the height of the img? There is a gap below the image, but it doesn't seem to be a padding/margin.

What is the gap or extra space below the image?

#wrapper {

  border: 1px solid red;



img {



<div id="wrapper">

  <img src="" />


1 Answer

0 votes
by (40.7k points)

By default, an image will be rendered inline, like a letter.

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

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

Note: You can just adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or change the display so it isn't inline.

Related questions

Browse Categories