We value your privacy

We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.

Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

how-to-remove-white-space-under-an-image-using-css
CSS

How to Remove White Space Under an Image Using CSS

admin

In this tutorial, we are going to see how to Remove White Space Under an Image Using CSS. If you try to place an image in a <div> block, you will see extra white space (approximately 4 or 5 pixels) at the bottom of the image. This happens because the image is an “inline” element, so the browser adds spaces below the line to adjust the other “inline” elements.

The most convenient way to get rid of this problem is to change the display property of the image using the value “block” instead of “inline”, as shown in the example below:
 

CSS Code:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.box1,
.box2 {
width: 200px;
border: 4px solid black;
}
.box2 img {
display: block;
}
.box1, .box2 { width: 200px; border: 4px solid black; } .box2 img { display: block; }
.box1,
.box2 {
    width: 200px;
    border: 4px solid black;
}

.box2 img {
    display: block;
}
 

HTML Code:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Remove White Space Under an Image Using CSS</title>
<style>
/* Put the CSS Style Here */
</style>
</head>
<body>
<h3>Default behavior</h3>
<div class="box1">
<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
</div>
<br>
<h3>After changing the 'display' property</h3>
<div class="box2">
<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Remove White Space Under an Image Using CSS</title> <style> /* Put the CSS Style Here */ </style> </head> <body> <h3>Default behavior</h3> <div class="box1"> <img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg"> </div> <br> <h3>After changing the 'display' property</h3> <div class="box2"> <img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg"> </div> </body> </html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Remove White Space Under an Image Using CSS</title>
		<style>
			/* Put the CSS Style Here */
		</style>
	</head>
	<body>
		<h3>Default behavior</h3>
		<div class="box1">
			<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
		</div>
		<br>
		<h3>After changing the 'display' property</h3>
		<div class="box2">
			<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
		</div>
	</body>
</html>
Result
Default behavior

After changing the 'display' property
mcq

You May Also Like

how-to-style-div-with-an-inner-border-inside-a-div-using-css

How to style div with an inner border inside a div using CSS

admin
how-to-overlay-one-div-over-another-div-using-css

How to overlay one DIV over another div using CSS

admin
how-to-style-select-option-dropdown-with-css

How to Style Select Option Dropdown with only CSS

admin

2 thoughts on “How to Remove White Space Under an Image Using CSS”

  • It’s not working for me….
    HTML

    CSS
    .book_cover{
    margin-left: auto;
    margin-right: auto;
    width: 25%;
    height: 71%;
    border: 2px solid black;
    display: block;
    }

    .book_cover a{
    opacity: .5;
    }

    .book_cover :hover{
    opacity: 1;
    }

    Reply

    • .book_cover img {
      display: block;
      }

      Reply

Leave a Reply

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