Many times we see that when we use an image inside an img tag in HTML, then by default there is some space below in that image. Now why is this space there and how can it be removed? We will talk about it below.

.main {
  border: 1px solid red;
  width: 250px;
}
img {
  width:250px;
}

As you can see we have used a simple image within a div

	<div class="main">
		<img src="https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg" alt="">
	</div>

Why this blank sapce?

By default img tag in HTML is an inline elements. Hence this space is visible, for this we have some solution which can be used to remove it.

Solution 1

Set you image as a display:block, display:flex, inline-flex or inline-grid

Solution 2

Set the image container (parent) to line-height: 0 or font-size: 0

Note :- But It will not work when the container is an inline element.

Solution 3

Set float to right, left, inline-end or inline-start on image.