CSS Image Inside Div Take Extra Space Below the Image

• CSS Image Inside Div Take Extra Space Below the Image

CSS Image Inside Div Take Extra Space Below the Image

When we put an image inside a <div> element you will notice extra space or gap at the bottom. This gap is because by default the image is an inline element and div is a block element. When we write letters there are some letters like g, j, p and q which goes below the baseline. The letter stay perfect on baseline like a, b, c etc. So, the extra spacing because image is anline element.

The following code will give you an idea about the real world problem we are discussing.

Problem Understanding

<div id="container">
  <img src="https://i.imgur.com/NidtM1s.jpg" />
</div>

<style>

#container {
  border: 1px solid red;
  width:400px;
}

img {
  width:400px;
}

</style>

Let’s apply the display block to image to fix this problem. You can also apply vertical align bottom.

Code Fix

<div id="container">
  <img src="https://i.imgur.com/NidtM1s.jpg" />
</div>

<style>

#container {
  border: 1px solid red;
  width:400px;
}

img {
  width:400px;
  display: block;
}

</style>