CODEWITHSUNDEEP
htmlcss
jela
jela

Reputation: 1469

What explains this behavior of inline-block?

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

Upvotes: 2

Views: 185

Answers (2)

Michiel van Oosterhout
Michiel van Oosterhout

Reputation: 23084

Edit:

Changing the first image to display block doesn't create the space between the image and the containing element, it was there before.

With regards to the one-pixel space: this is just to account for the border of the other element. Whether or not the first image is display-block doesn't matter:

Upvotes: -1

Wex
Wex

Reputation: 15695

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/

Upvotes: 2

Related Questions