Why image has extra space in below ?

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 {

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="">

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 35,513 other subscribers

Follow bufixr.com

Copyright © BugFixr 2023-2024