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

我想这是一个非常简单的问题，但我一辈子都找不出为什么我的浮动div下面有一个空格。检查时，发现空白在div内，在图像下方

html

---

该空间是保留的小写字母有降号的区域（GJBYY）

默认情况下，包括图像在内的内联级元素位于其上。您可以为图像提供一个

垂直对齐

，其值不是

基线

、

继承

或

初始

（和

超级

）

例如：

.product img{垂直对齐：底部；}

该空格是小写字母的保留区域（GJBYY）

默认情况下，包括图像在内的内联级元素位于其上。您可以为图像提供一个

垂直对齐

，其值不是

基线

、

继承

或

初始

（和

超级

）

例如：

.product img{垂直对齐：底部；}

谢谢！不确定我是否理解这背后的逻辑。如果有人链接到一篇文章或一个描述这背后机制的标准定义，我将非常感激。@GarlandBriggs，你不理解其中的哪一部分？关于基线或

垂直对齐

属性的效果？我知道将垂直对齐设置为顶部、中间或底部会消除间隙，但我不明白为什么。后裔们不是还需要一个地方吗？而

vertical align:bottom

是否会将其放回基线，使下行空间重新出现？实际上

vertical align:middle

不会删除下行高度，它只是将内联级别元素的底部与整行的底部对齐；我在几天前说明了它的效果，这可能会有所帮助。谢谢！不确定我是否理解这背后的逻辑。如果有人链接到一篇文章或一个描述这背后机制的标准定义，我将非常感激。@GarlandBriggs，你不理解其中的哪一部分？关于基线或

垂直对齐

属性的效果？我知道将垂直对齐设置为顶部、中间或底部会消除间隙，但我不明白为什么。后裔们不是还需要一个地方吗？而

vertical align:bottom

是否会将其放回基线，使下行空间重新出现？实际上

vertical align:middle

不会删除下行高度，它只是将内联级别元素的底部与整行的底部对齐；几天前我举例说明了它的效果，这可能会有所帮助。

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

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