时间戳

首页 > 解决方案 > 如果两个同级内联元素用垂直对齐标记，那么作为基线的字体是什么？

css - 如果两个同级内联元素用垂直对齐标记，那么作为基线的字体是什么？

问题描述

据我了解，将inline-block元素相对于文本字体的基线vertical-align对齐。当inline-block元素有一个文本兄弟时，这是有道理的，这样我们就知道用作基线的字体大小是多少。

但是如果兄弟不是文本，而是另一个inline-block元素呢？采用基线的文本字体是什么？

例如：

<div style="padding: 8px 16px; background-color: green">
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>

输出是： 在此处输入图像描述

这里到底发生了什么？底线是什么？

标签： cssvertical-alignment

解决方案

从规范：

以下值仅对父内联元素或父块容器元素的支柱有意义。

和

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。我们称那个假想的盒子为“支柱”。（这个名字的灵感来自 TeX。）。

所以就好像我们的容器内总是有一种宽度为 0 的文本来定义基线。

.box {
  background:linear-gradient(red,red) 0 22px/100% 1px no-repeat;
}

.box > * {
  outline:1px solid;
}
With text
<div style="padding: 8px 16px; background-color: green" class="box">
     BASELINE
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>
without text (the reference is the same)
<div style="padding: 8px 16px; background-color: green" class="box">
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>

推荐阅读