html tutorial - How to remove the extra white space underneath an image using CSS - html5 - html code - html form
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 eliminate this drawback is to alter the default show property of the image from inline to block, like within the example below:
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="pic-box">
<img src="pictures/play.jpg" alt="Play Card">
</div>
</body>