How to remove the extra white space underneath an image using CSS
Topic: JavaScript / jQueryPrev|Next
Answer: Use the CSS display property
If you try to put an image inside a <div> element that has borders, 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 value of the image from inline to block, i.e. apply the style display: block; on images, as shown below:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove White Space Below Images</title>
<style>
.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>
</html>Related FAQ
Here are some more FAQ related to this topic:
