admin 案例分享 2023-05-27 14:01:42

关于 img 的 vertical-align: bottom

一个困扰我多时但是一直没有找到确切答案的问题。

V2EX 在某次更换了 DTD 之后：

<!DOCTYPE html>

然后页面上的 img 标签底部就会出现一条新的空白，之前的 DTD 不会。然后当时搜了一下之后，找到一个解决方案是加 vertical-align: bottom 可以把那条空白去掉。但是当时也没有细究原因。

有人也遇到和研究过这个问题的可以分享一下心得么？

----------------------- 以下是精选回复-----------------------

答:主要和 inline 的元素的设定是有关系的

图片是 inline 的元素，对齐是和它的父级的 baseline 去进行对齐的，但撑开高度的是元素整体的高度 bottom line，所以就会空白了。

比如改变规则可以解决如设置为 display: block，或者改变 inline 元素的对齐方式可以解决，如你用到的 vertical-align: bottom
答:以前在张鑫旭的博客里看到过 vertical-align 相关的东西，应该是这个问题: ，
原文地址:https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
答:看了一下，如果说的是 avatar 的话，应该是<a>标签纵向位置导致 td 的高度变高。（正常 tr 应该是 48px，a 标签靠下，导致 tr 高度变成 53px ）

当 a 标签内的 img 向下对齐的时候，反而会和 a 标签重合，导致高度回归正常。

具体原因的话，在 W3C 标准中，a 标签默认是 display:inline，这会导致 a 标签和内联元素的高度不一致。
可以将 a 标签的的样式改为 display:block，然后正常设置 a 标签的高宽来解决。

搜索了一下，也有人问类似的问题，链接如下：
https://segmentfault.com/q/1010000000156955
答:https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

默认是对齐 baseline <https://en.wikipedia.org/wiki/Baseline_(typography)>，而且通常 <img> 的父元素内有空白符（文本内容）

设置父元素 line-height: 0; 也是可以解决的
答:以前也看过张鑫旭那个文章，，但平时用处不大也没去仔细了解原理
为了防止 web 页面上一些幽灵节点，还有行高引起的 baseline 问题
我一般习惯上在初始化 css 的时候加上 * {font-size:0;line-height:0}
答:简而言之：这种设计是为了配合拉丁字母的排版而设计的，img 图片默认以文字行间元素的方式渲染，默认对齐拉丁字母的基线（ baseline ）。

拉丁文字的基线是什么意思呢？比如 a 和 g 这两个字母，你在屏幕上看这一行文字的排版，会发现 g 这个字母的下半部分是超出了这行文字的基线的。即, a 的最底部和 g 的中间位置相连的这条线就是基线。

为了给 g 这类字母的下半部分流出渲染空间，baseline 的下面必须有空白，所以图片默认底部也有空白。

当你给图片设置 vertical-align: bottom，实际上就是让图片对齐 g 这类文字的底部。