css内联元素错位引发对line-height的思考

terry 2年前 (2023-09-27) 阅读数 72 #数据结构与算法

line-height 对于一个可爱的前端小姐姐来说，这应该是经常见面的老朋友了。但有一天我突然发现我并没有那么了解他，他并不像看上去那么简单。

事情是这样的...

在随机工作的时候，写了一个这样的模板：

<div>
    <span class="name">重大疾病险</span>
    <span class="tip">保额每月可累计</span>
</div>
复制代码

div{
    font-family: "PingFang SC";
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
复制代码

两个相邻的嵌入元素，字体一大一小，行高相同。第二段文字必须要有字数过多时自动移到下一行的效果，所以第二个span就是inline-block我想象的结果是高度两个span都是20px，div的高度也是20px，多么完美。但结果往往不尽如人意...怎么

div的高度是28??

再看一下子元素，一个是28，一个是20??

问题：这是一条线——高度不会影响内联元素吗？？然而，规范告诉我，对于非替换的内联元素，它用于计算行字段的高度。
问题2：既然上线了，为什么评论元素显示为28而不是20？有一个文本内容区域。当您用光标选择该行文本时，您可以将其视为背景区域。它受字体系列和字体大小的影响。即使字体大小相同，如果字体不同，你看到的高度也会不同。同学们可以自己尝试一下。这里我强调的是，你看到的，也就是我们这里的28个像素，实际上是文本内容区域的高度，而内容区域的高度并不是实际的高度，也就是说，它不会影响该元素的实际大小。它不支持父元素的高度，因此这只是您看到的高度。对于内联元素，line-height实际上会影响其高度。
这里我们可以通过更改他们的字体系列来确认。
```
  div{
      font-family: "HelveticaNeue";
  }
  .name{
      line-height: 20px;
      font-size: 20px;
  }
  .tip{
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
  }
复制代码
```
可以看到，更改字体后，.name的高度从28变为24，‸为❙♸♸ inline - block ，所以高度没有变化，但是父级div的高度仍然是28px，也就是说内容区域不影响父级的实际高度。
问题3：如何查看自己的实际身高？您可能还注意到第二部分是 inline-block，其高度为 20px。然后我们将第一个span设置为inline-block我们来看看。

果然，它的高度最终达到了我们预期的 20px。
那我们看一下父元素div的高度：

！！为什么还是28px？？
问题4：两个子元素都已经是20像素了，为什么父元素还是28像素？首先，我们问两个问题：
1. 证明上面问题2所说的是正确的。内容区域不会影响实际大小。现在我们所有的元素都是 20 像素，但父元素仍然是 28 像素。
2. 当我们将第一个范围设置为inline-block后，你可以看到它的大小变成了20px，但这并不意味着它没有内容区域，或者它的内容区域是20px。你可以理解为我们用一层盒子包裹了它，你可以看到盒子的实际大小，但是内容区域在里面，你就是看不到它。而且，这是无法影响任何人的事情。
让我们回到我们的问题。如果仔细观察上图，您会发现两者都是高度为 20px 的子元素，并且顶部和底部之间有一些空间。如果仔细观察，您会发现它们没有对齐，并且红色背景位于顶部。，在粉色背景下它们之间有轻微的错位。就这样，我们的父元素被拉伸到 28px。那么它们从哪里来呢？
由于是错误的对齐方式导致父元素上升，我们可以很容易将CSS中与对齐相关的属性想象为vertical-align。会不会是一个诡计？然后，让我们尝试更改他们的thervertical-align：toptical-align：top，顶部被错位不对。和之前差别很大...
虽然这些属性值无法对齐，但是我们可以发现确实是相关的。也许我们使用不当而影响了这个属性？然后我们看看vertical-align是如何对齐的。如果我们不先设置，就会有默认值：baseline——线性对齐。
插图默认与中心线对齐，中心线指向行框架中字母“x”的下边缘：
Eh？仔细观察我们之前的未对齐图像。您会注意到，虽然元素没有对齐，但文本的底端是对齐的。这不是正常的基线对齐吗？现在这是有道理的。
突出显示！！
插入元素的默认对齐方式是行对齐，即与底部x边框对齐。两个范围的高度相同，都是20px，但重点是它们的字体大小不同。如果文本设置为 line-height，它将基于 line-height 居中。这意味着它们在相同高度的框中居中，但由于字体大小不同，因此文本底部未对齐，但它们需要与线条对齐，因此它们必须未对齐。
这里引用心虚大师的图：
问题5：这是否意味着如果我们将两个元素的行高设置为不同，我们就可以正确地增加父元素？已经？这里我们给两个span与自己的字体大小相同的行高：20px和14px。可以看到它们并没有向外错位，只是父元素的高度不符合预期。或 28 像素。发生了什么？会不会影响其他事情？
你猜对了，但这是我们看不到的东西。我引用一下张新旭大师的名字——灵虚结。
“幽灵空白节点”是内联盒模型中非常重要的概念。具体来说：在 HTML5 文档的声明中，内联元素的所有解析和渲染都表现为每个行框前面都有一个行字段。与“空节点”相同。这个“空节点”始终是透明的，不占用宽度，不可见，并且不能被脚本访问。它就像一个幽灵，但它存在并且表现得像一个文本节点。这就是为什么我称之为“鬼虚结”。
由于它是不可见的，我们可以假装它是一个可见的x。
```
  <div>
      <em>x</em>
      <span class="name">重大疾病险</span>
      <span class="tip">保额每月可累计</span>
  </div>
复制代码
```
```
  div{
      font-family: "PingFang SC";
  }
  em{
      display:inline-block; /*为了审查元素看到的不是content area*/
      font-style:normal;
  }
  .name{
      line-height: 20px;
      font-size: 20px;
  }
  .tip{
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
  }
复制代码
```
未设置字体大小“x”和行高。字体大小继承为 20px。元素的默认行高为 1.x（字体大小的 1.x 倍）。具体值需要研究，但肯定>1，从图中可以看到，当什么都不设置时，这个“x”的高度是28px，也就是说空鬼节点的高度是28px。
如果我们把空幽灵节点的行高设置小一点不是很好吗？但这个灵结是看不见摸不着的，那么如何设置呢？不要忘记 行高 是继承的。如果我们将line-heigt设置为父div，ghost节点自然会继承它。

如何解决

了解了上面的问题和原理后，我们来看看如何解决这个问题。

要解决一个

，我们可以为 父行行高设置一个非常小的值

div{
    line-height: 5px;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /*为了审查元素看到的不是content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
复制代码

，节点 Ghost 的行高只有 5px ，父元素的行高是20px，这没有什么问题。但这个方法还不够完美，因为你需要考虑这个很小的值...

`解决方案2`

当行高设置为无单位值时，意味着是字体大小的某个倍数。

div{
    line-height: 1;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /*为了审查元素看到的不是content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}
复制代码

将父元素的 line-height 设置为 1。这样，子元素就有自己的字体大小，包括空节点。这样，就不会有人无意中支持父元素。当然，除非您的空白节点继承了非常大的字体大小，您需要了解这一点。