Home/ Questions/Q 6979789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:55:51+00:00

This page shows two images, each contained inside a separate span displayed as an

  • 0

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>

JSFiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Whenever there is any whitespace between two inline elements in HTML, the whitespace in will force a gap between them. This happens to your <span> elements because they are inline-elements. This gap can be removed by removing any whitespace between your two span tags, eg:

    <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>

    If your images are not set to display: block, you can remove the extra vertical-space by setting line-height: 0; on your <span> elements.
    If you are setting your images to display: block, it seems like your best is to use the vertical-align property to align them with each other; try:

    .product_box, #stats { vertical-align: middle; }

    It’s usually a good idea to use a CSS Reset when developing, to minimize the effect of these browser-defaults.

    Updated Code:

    HTML:

    <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>

    CSS:

    .product_box, #stats { 
    line-height: 0;
    vertical-align: middle; }
.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;
}

    Preview: http://jsfiddle.net/Wexcode/4QNhG/

    • 0