html - 内联 block 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

默认vertical-align value是baseline，可以是文本的底线，也可以是图片的底线(img元素是replaced element，inline* level)，导致演示第一行的偏移量。

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