V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Livid
V2EX  ›  前端开发

关于 img 的 vertical-align: bottom

  •  
  •   Livid · 2021-10-13 11:03:21 +08:00 · 2064 次点击
    这是一个创建于 1137 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    V2EX 在某次更换了 DTD 之后:

    <!DOCTYPE html>
    

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

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

    10 条回复    2021-10-13 13:19:01 +08:00
    ianva
        1
    ianva  
       2021-10-13 11:18:36 +08:00   ❤️ 1
    主要和 inline 的元素的设定是有关系的

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

    比如改变规则可以解决如设置为 display: block,或者改变 inline 元素的对齐方式可以解决,如你用到的 vertical-align: bottom
    liyang5945
        2
    liyang5945  
       2021-10-13 11:21:01 +08:00
    以前在张鑫旭的博客里看到过 vertical-align 相关的东西,应该是这个问题:
    原文地址:https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
    ianva
        3
    ianva  
       2021-10-13 11:25:22 +08:00
    @liyang5945 张鑫旭 的这篇文章对 inline 元素的理解有问题
    kop1989
        4
    kop1989  
       2021-10-13 11:26:56 +08:00
    看了一下,如果说的是 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
    learnshare
        5
    learnshare  
       2021-10-13 11:32:44 +08:00   ❤️ 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

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

    设置父元素 line-height: 0; 也是可以解决的
    FFFFourwood
        6
    FFFFourwood  
       2021-10-13 11:41:00 +08:00
    以前也看过张鑫旭那个文章,,但平时用处不大 也没去仔细了解原理
    为了防止 web 页面上 一些 幽灵节点, 还有 行高引起的 baseline 问题
    我一般习惯上 在 初始化 css 的时候 加上 * {font-size:0;line-height:0}
    learnshare
        7
    learnshare  
       2021-10-13 11:42:49 +08:00
    @learnshare
    深究一下的话,这也是 CSS 为图文排版设计的功能。
    但类似的许多功能都被用户强行拿来做布局,所以玩法多样,问题也很多
    Biwood
        8
    Biwood  
       2021-10-13 11:52:59 +08:00   ❤️ 1
    简而言之:这种设计是为了配合拉丁字母的排版而设计的,img 图片默认以文字行间元素的方式渲染,默认对齐拉丁字母的基线( baseline )。

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

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

    当你给图片设置 vertical-align: bottom,实际上就是让图片对齐 g 这类文字的底部。
    ianva
        9
    ianva  
       2021-10-13 12:00:18 +08:00
    @FFFFourwood font-size:0 的设置并不太推荐,特别是有些版本的 Chrome 设置了最小的 font-size 不能小于 12 这种问题
    FFFFourwood
        10
    FFFFourwood  
       2021-10-13 13:19:01 +08:00
    @ianva 我是在 css 最开始 初始化时候添加的 , 后面也会根据 项目需求 设置 常用 h1-h6,p,之类的标签或者字体类名的,,主要就是为了解决非字体的 比如 img,div 等 出现幽灵节点问题,,浏览器默认的最小 font-size 完全不会影响的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1322 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 17:48 · PVG 01:48 · LAX 09:48 · JFK 12:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.