V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
manyfreebug
V2EX  ›  CSS

当元素的 line-height 设置为 0 时,怎么解释所在行发生的这种现象?

  •  
  •   manyfreebug · 2020-03-28 23:17:00 +08:00 · 2246 次点击
    这是一个创建于 1461 天前的主题,其中的信息可能已经有所发展或是发生改变。
    当 span 元素的 line-height 设置为 0 时,为什么所在的行会向上移动到 div 元素上面?移动了多少高度呢?(0-50)/2 = -25px ?
    

    运行结果也可在这查看: https://jsbin.com/yawurubebi/edit?html,css,output

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <div></div>
      <span>hello world</span>
    </body>
    </html>
    
    * {
      margin: 0;
      padding: 0;
    }
    
    div {
      height: 100px;
      background: skyblue
    }
    
    span {
      font-size: 50px;
      line-height: 0px;
      background-color: pink;
    }
    
    7 条回复    2020-03-29 16:05:48 +08:00
    chengyecc
        1
    chengyecc  
       2020-03-29 00:49:45 +08:00 via Android
    因为文字在行高内垂直居中?
    127000
        2
    127000  
       2020-03-29 00:50:43 +08:00
    取值 <数字>
    该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下,这是设置 line-height 的推荐方法,不会在继承时产生不确定的结果
    developer.mozilla.org/zh-CN/docs/Web/CSS/line-height
    chengyecc
        3
    chengyecc  
       2020-03-29 00:52:09 +08:00 via Android
    @chengyecc 没看清。。。不好意思
    manyfreebug
        4
    manyfreebug  
    OP
       2020-03-29 07:36:14 +08:00
    @127000 额,这段话貌似也不能解释发生的现象啊。。。不好意思
    gzlock
        5
    gzlock  
       2020-03-29 08:48:45 +08:00 via Android
    vertical-align 为 middle 的话,上移量就是字体高度 /2 吧
    改变 vertical-align 为 bottom 就可以看到变化
    wszgrcy
        6
    wszgrcy  
       2020-03-29 10:54:25 +08:00 via Android
    盲猜因为行高为 0 x 高就重合于上边,可以把 hello world 改成 x 看看是不是把 x 在中间分割了
    PyCode
        7
    PyCode  
       2020-03-29 16:05:48 +08:00
    这里发生了这些事:首先 span 外层会添加匿名行盒,然后由于 span 的行高设为 0,该行盒高度也变为了 0,因为 half-leading 的规范,span 的文本内容会向上移动 content height 的一半
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1012 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:28 · PVG 03:28 · LAX 12:28 · JFK 15:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.