内联块div内的内联元素

Question

无法理解为什么<img>内部从顶部向下<div style="display: inline-block">推div？

HTML

<div id="wrapper">
        <div id="a1">
            <img src='...' alt=""/>
        </div>
        <div id="a2">
        </div>
        <div id="a3">
        </div>
        <div id="a4">
        </div>
        <div id="a5">
        </div>
        <div id="a6">
        </div>
        <div id="a7">
        </div>
        <div id="a8">
        </div>
</div>

CSS

div > div {
    background: red;
    height: 200px;
    width: 19%;
    text-align: center;
    margin: 0 5% 5% 0;
    display: inline-block;
}

img {
    height: 128px;
    width: 128px;
    display: /* "BLOCK" FIXES THE ISSUE */; 
}

编辑

设置img以display: block解决问题.但有人能解释我为什么没有这样的行为display: block？

Answer 1

img标记的行为类似于内联和bock元素,这个答案基础:<img>元素块级别还是内联级别？

这就是为什么你必须在带有内联块的div内的img上显示块的原因.

Answer 2

默认vertical-align值为baseline，它可以是文本的底线或图像的底线（img元素是被替换的元素，inline* level），这会导致您的演示的第一行出现偏移。

为了修复它，您可以设置vertical-align为top，或者像您说的那样设置img为display: block也可以使用。