1

I suppose this is a real simple problem, but I can't for the life of me find out why my floating divs have a whitespace below them. When inspecting, it turns out the whitespace are inside the divs, below the images.

http://jsfiddle.net/5rasqL2d/

html

<div class="container group">
    <div class="marginfix-wrapper">
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
    </div>
</div>

css

/* clearfix */
 .group:after {
    content:"";
    display: table;
    clear: both;
}
.container {
    width: 602px;
    background-color: gray;
}
.marginfix-wrapper {
    margin-right: -10px;
}
.product {
    float: left;
}
.product img {
    width: 194px;
    margin: 0 10px 0 0;
}
Garland Briggs
  • 119
  • 2
  • 13

1 Answers1

4

That space is the reserved area for lowercase letters having descenders (gjpqy).

Inline level elements including images sit on their baseline by default. You could give the images a vertical-align with a value other than baseline, inherit or initial (and super).

EXAMPLE HERE

For instance:

.product img { vertical-align: bottom; }
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Thanks! Not sure if I understand the logic behind this. If anyone have a link to an article or a standards definition that describes the mechanism behind this I'd be thankful. – Garland Briggs Sep 05 '14 at 11:48
  • @GarlandBriggs Which part of it you did not understand? Things about baseline or the effect of `vertical-align` property? – Hashem Qolami Sep 05 '14 at 11:52
  • I understand that setting vertical-align to top, middle or bottom removes the gap, but I don't understand why. Wouldn't the descenders still need a place? And wouldn't `vertical-align: bottom` put it right back on the baseline, making the space for descenders re-appear? – Garland Briggs Sep 05 '14 at 12:08
  • Actually `vertical-align: middle` won't remove the descender height, it just aligns the bottom of the inline level elements with the bottom of the entire line; I illustrated it's effect few days ago **[here](http://stackoverflow.com/questions/25419552/how-to-align-a-label-to-the-bottom-of-a-div-in-css/25419852#25419852)** that might help. – Hashem Qolami Sep 05 '14 at 12:21