问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

内联盒子,幽灵空白节点的问题

头像
Jerry_Wang
    37343553

    张鑫旭老师说，只要有“内联盒子”在，就一定会有“行框盒子”
    那为什么下面这样span为高度为0,没有触发幽灵空白节点？空的span不算内联盒子吗？

    <div><span></span></div>

    而span 设置了inlin-block 就触发了？

    <div><span style="display:inline-block"></span></div>

    clipboard.png

    css
    阅读 10.6k
    6 个回答
    得票最新
    头像
    xqxian
      3812

      w3c规范里有这么一段：

      Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

      意思就是如果一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow内容（比如图片、inline-block或inline-table元素），且不以保留的换行符结束的话，就会被视作高度为0的line box。

      问题里的<div><span></span></div>就刚好符合这种特殊情况，设置成inline-block就不符合了。题主也可以试着把display改成inline-table，或者设置非0的margin、padding、border等，总之只要不满足上述任一种情况，那么就会受“幽灵空白像素”（官方说法应该叫"strut"元素）的影响从而出现行高。

      头像
      zifengb
        40826

        重新详细阅读了一下几篇相关的博客：
        CSS深入理解vertical-align和line-height的基友关系
        CSS float浮动的深入研究、详解及拓展(一)
        觉得理解没有错的话，原文的意思：幽灵空白节点应该是由font-size、line-height、vertical-align等相关的几个属性造成的，line boxes模型里面的span也算内联盒子，不过只是触发幽灵空白节点的必要条件之一而已！

        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      background-color: yellow;
      // font-size: 0;  // 注1
      // line-height: 0; // 注2
    }
    .box,
    .box > span {
      outline: 1px solid #333;
    }
    .box > span {
        // vertical-align: top; // 注3
    }
  </style>
</head>
<body>

  <div class="box"><span style="display:inline-block; width: 100px;"></span></div>

</body>
</html>

        上面的例子，例如在chrome浏览器显示下，默认font-size:16px、line-height: normal
        当设置空白的span为display:inline-block时，line-height和vertical-align就起作用了，幽灵空白节点出现！可是尝试一些取消注1注释，或者更加清楚：先取消注2注释，再取消注3注释，可以看到幽灵空白节点是line boxes的高度(height，line-height)和垂直基准线对齐作用的结果~

        这是我的一些理解，希望有所帮助，或者去详细看下上面的文章？?

        头像
        一依
          31
          新手上路，请多包涵

          在代码<div><span></span></div>中
          <span>.....</span>这部分组成内联盒子

          行框盒子包裹着一行内联盒子，比如<div>...<span></span></div>，其中...<span></span>才是被行框盒子包裹。

          最后，空白节点是出现在行框盒子前面，即strut...<span>...</span>

          设置div元素的line-height就能发现<div><span>hahahahha</span></div>中，div的高度不等于span元素的高度，div元素的高度就是空白节点影响的

          头像
          傻白甜冲鸭
            1
            新手上路，请多包涵

            这个空<span>是有高度的,而且高度表现和前面有一个"strut"一样.所有的line-box前面都有一个"strut",每个containing-block里也至少有一个"strut".(这个"strut"的表现和其他内联元素一样,只有高度宽度为0)inline元素无法设置width,height,只有高度宽度为0时无法撑起containing-block.设置水平方向的padding,border,margin,宽度出现,故而撑起容器高度.

            这里宽高均为0的inline-block元素的containing-block却有了一个恰好等于line-height的高度.这个高度只能是不同的基线对齐造成的.inline-block元素的的特殊之处在与:内部可以容纳line-box,所以内部至少有一个"strut".这里的containing-block的"strut"的基线在顶部,内部inline-block内的"strut"基线在底部.(inline-block元素baseline优先内部最底部的内联元素的baseline,没有任何内联元素则是底部margin边缘)

            <div><span></span></div>
这里div高度为0,span高度在上面而不是下面.
            <div><span style="display:inline-block;"><i></i></span></div>
这里i高度是在底部

            这两条基线对齐,基线到基线的距离正是行高的定义.

            头像
            陈落
              6353565

              我发现是浏览器的问题，用谷歌确实没有高度，换成火狐就有高度了你也可以试试。
              图片描述

              头像
              udemy
                396587172

                感觉这辈子都不可能搞懂了

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏