内联元素嵌套在内联块级元素中

Question

我不太明白为什么在<div style="display: inline-block">里的<img>会使该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 会出现这样的行为呢？

- Edgar

---

只需在CSS文件中的“div> div”中添加“vertical-align: top;”即可。 - Jérémy Halin

Answer 1

标签的行为类似于内联和块级元素，基于这个答案：Is <img> element block level or inline level?。因此，您必须在内联块级元素div中将显示为块级元素。

- Daniel Semblano

Answer 2

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

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

- Stickers

Answer 3

您可以通过添加float: left或vertical-align: top来解决此问题。 https://jsfiddle.net/foxhh0av/

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

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

<div id="wrapper">
  <div id="a1">
   <img src='http://dfsm9194vna0o.cloudfront.net/1471693-0-Washingmachineforlaundry128.png' 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>

- JoeL

Answer 4

只需要在你的CSS中更改这个：

img {
  height: 128px;
  width: 128px;
  display: block; 
}

那应该解决了。

- Chris G

---

谢谢。我发现“block”可以解决这个问题。但您能否请解释一下，为什么没有“display: block”的情况下会出现这样的行为？ - Edgar

Answer 5

您可以将 vertical-align: top; 设置为子 div（div > div）。

- Julian

---

谢谢！您能否解释一下为什么没有v-a: top会出现这样的行为？ - Edgar

vertical-align: top; 表示元素顶部与父元素顶部对齐。例如：子 div 的内容高度不同，它们的顶部边缘将位于相同的高度（默认值为 baseline）。 - Julian