This page shows two images, each contained inside a separate span displayed as an inline block. To the first image is applied the additional style of "display:block", which removes the space between the image and the bottom of its green-bordered span (which space is provided for descenders when an element is styled as inline). Contrawise, this space is visible between the second image (still displayed as inline) and the blue border of the second span.
Why does displaying the first image as a block create space between the first image's span and the element containing the span (orange box)? Is it because when one inline element is contained inside another, the spaces allotted for descenders merge in the manner of vertical margins? Also I am wondering why there is a one-pixel space between the top of the blue span and the orange container.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span>
<span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
</div>
</body></html>