How to remove the extra white space underneath an image using CSS

Topic: JavaScript / jQuery« Prev|Next »

Answer: Apply CSS display:block; on images

If you try to put an image inside a <div> element, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.

The easiest way to get rid of this problem is to change the default display property of the image from inline to block, like in the example below:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Remove White Space Below Images</title>
  • <style type="text/css">
  •     .img-box{
  •         width: 125px;
  •         border: 4px solid #333;
  •     }
  •     .img-box img{
  •         display: block;
  •     }
  • </style>
  • </head>
  • <body>
  •     <div class="img-box">
  •         <img src="images/club.jpg" alt="Club Card">
  •     </div>
  • </body>

Your Feedback:


We would love to hear from you! Please say something.