浮动div中或浮动div下的无法解释的空间

Question

我认为这是一个非常简单的问题，但我不能为我的生活找出为什么我的浮动div在它们下方有一个空格。在检查时，结果显示空格位于图像下方的div内部。

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

Answer 1

该空格是具有下行（gjpqy）的小写字母的保留区域。

默认情况下，包含图片的内嵌级元素位于 baseline 上。您可以为图片vertical-align提供除baseline，inherit或initial（和super）以外的值。

<强> EXAMPLE HERE

例如：

.product img { vertical-align: bottom; }