html - 图片标签下方的神秘空白

Question

<分区>

Answer 1

Look at this line of text. Notice there are no letters that breach the baseline.

现在看下面的句子:

By just crossing the bridge he probably got away.

注意字母 j、g、p 和 y。这些字母在排版中称为 descenders , 违反 baseline .

^{来源:Wikipedia.org}

默认值the vertical-align property是基线。这适用于行内元素。

你的 img 默认是行内级别的，和 text 一样，span、input、textarea 和其他内联框，与基线对齐。这允许浏览器提供必要的空间来容纳下行元素。

请注意，间隙不是由边距或填充造成的，因此在开发人员工具中不容易检测到。由于基线对齐，内容从容器底部边缘略微抬高。

这里有几种处理方法:

1. 将 vertical-align: bottom 应用于 img 标签。在某些情况下 bottom 不起作用，因此请尝试 middle、top 或 text-bottom。

---

1. 从 display: inline 切换到 display: block。

---

1. 调整容器的 line-height 属性。在您的代码引用中(由于 linkrot 而被删除)，line-height: 0 成功了。

---

1. 在容器上设置一个font-size: 0。如有必要，您可以直接恢复子元素上的字体大小。

---

相关:

• > Why is my textarea higher up than its neighbor?