How to remove the extra white space underneath an image using CSS?
How to remove the extra white space underneath an image using CSS?
By applying CSS display:block; on images,the extra white space underneath an image can be removed.
The image inside a <div> element, there wil be a extra white space (around 3px) at the bottom of image.
This is because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
The best way to avoid this problem is to change the default display property of the image from inline to block,
For example :
<!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>
You’re seeing the space for descenders (the bits that hang off the bottom of ‘y’ and ‘p’) because img is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
