Html 为什么将带有溢出：隐藏的“inline block”元素的基线设置为其底边距？

在阅读了解释

内联块

元素（和）行为的两个伟大答案后，我仍然有两个无法解释的问题

1.将

内联块的基线从其行框的基线更改为下边距边缘的原因是什么


“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

2.如何计算该班次


重要提示：我不会试图找到解决方法来修复它。我试图理解当应用
溢出：隐藏
时，更改
内联块
元素定位行为的原因。所以，请不要发布傻瓜的答案

更新

不幸的是，我没有得到我想要的，尽管我接受了答案。我认为问题在于问题本身。关于第一个问题：我想了解为什么
内联块
不能保留其行框的基线，即使它有
溢出：隐藏
（当然，尽管有W3C规范）。我想听听设计决策——不仅仅是它必须被设置成什么，因为W3C it要求第二个：我想得到一个公式，我们可以在其中粘贴元素的
字体大小
和
行高
，并得到正确的结果

无论如何，感谢所有人：）

更新2

幸运的是，主观上找到了答案！请参阅第一个重新接受的答案。谢谢你，@pallxk！）
 答案看起来不像威尔，但我在示例中发现了一件非常有趣的事情

如果我们在
#firstDiv
上加一个lool，我们可以在底部看到一些-margin。但是我认为这个边距是从水平滚动条的高度得到的


我取它的高度，高度接近14px

然后取out
内联块的上边距高度，带
溢出：隐藏
它是15px，不带
溢出：隐藏
它接近30px



这是巧合吗？我不这么认为。同样的技巧也适用于更高的
#容器

顺便说一句，这个回答并不是为了回答问题，我只是不能把它全部放在评论中。我不知道这一切是如何联系在一起的，我只是注意到了这一点。感谢您的理解。
这可能不是答案。但是它可以通过删除
内联块
元素之间的额外空间来帮助解决这个问题

<style>
.main_div {
    display:table;
    border-collapse:collapse;
    width:100%;
    border:1px solid red;
}
.main_div span {
    display:table-cell;
    border:1px solid black;
    height:20px;
    border:1px solid green;
}

</style>
<div class="main_div">
    <span class="one">one</span>
    <span class="two">two</span>
    <span class="three">three</span>
</div>


.main_div{
显示：表格；
边界塌陷：塌陷；
宽度：100%；
边框：1px纯红；
}
.主分区跨度{
显示：表格单元格；
边框：1px纯黑；
高度：20px；
边框：1px纯绿色；
}
一
二
三
@timur：首先是一个好问题

我不知道它是否能回答您的问题，但我想谈谈“内联块”元素的一些行为方面

<style>
.main_div {
    display:table;
    border-collapse:collapse;
    width:100%;
    border:1px solid red;
}
.main_div span {
    display:table-cell;
    border:1px solid black;
    height:20px;
    border:1px solid green;
}

</style>
<div class="main_div">
    <span class="one">one</span>
    <span class="two">two</span>
    <span class="three">three</span>
</div>

首先，“内联块”元素根据其同级元素及其内容进行操作

如果有两个div，一个在另一个旁边，并且都有display:inline block；属性：值，则它将取决于每个div中的内容，并将开始显示基线中的内容，这是“内联块元素”的自然行为

现在，让我解释一下“溢出”属性行为

默认情况下，溢出属性为“可见”，其依赖属性为“溢出包裹：正常；”。此外，它仅应用于“块”级别和“内联块”元素，因为内联元素是那些换行到文本的元素，并且内容中没有空格来阻止溢出

因此，您提供的示例中的范围必须是“块”或“内联块”，才能应用溢出和垂直对齐

如果你看这把小提琴--->我在第二个跨度元素中使用了“inline block”

HTML

<div class="one"><span>as</span></div><div class="two"><span>asd</span></div>

}

现在，只需使用WebDeveloper工具，将鼠标悬停在div.two和div.two>span上，然后检查高度差异

这是因为span是div.two的内容，而div.two是内联块，div.two高度上的其余空间是为其余内容（即空白）而固定的。您通常会在“块”级别和“内联块”级别元素上看到这种行为

<style>
.main_div {
    display:table;
    border-collapse:collapse;
    width:100%;
    border:1px solid red;
}
.main_div span {
    display:table-cell;
    border:1px solid black;
    height:20px;
    border:1px solid green;
}

</style>
<div class="main_div">
    <span class="one">one</span>
    <span class="two">two</span>
    <span class="three">three</span>
</div>

另外，请注意“span”和“div.two”的“transform origin”，它在y轴上的差值为4px。
1。将内联块元素的基线从其行框的基线更改为底部边距边缘的原因是什么？

它是默认的
行高
或继承到内联块元素的其父元素的正常行高，或由用户代理定义的默认值，W3C推荐的
行高：正常

此处参考


说

正常

告诉用户代理将使用的值设置为基于“合理”的值
在元素的字体上。该值的含义与

我们建议“正常”的使用值介于1.0到1.2之间。这个
计算值为“正常”

因此我们知道默认值是
行高：normal
，它将继承。
现在我们知道内联块将元素添加为行高，让我们看看设置overflow:hidden时会发生什么

说


隐藏的

内容被剪裁，没有提供滚动条

溢出：隐藏和显示：内联块为挂起的字符（如pgy）创建空间。因为它是块和内联的，
Initial value normal
Inherited yes

<style>
.first-div{
    border:#F00 1px solid;
}
.first-div span{
    /**by default span is an inline element.**/
    border:#093 1px solid;
}
.second-div{
    /** line-height not defined default line height will be used **/
    border:#F00 1px solid;
}
.second-div span{
    /** default line height inherited from the secod-div **/
    display:inline-block;
    border:#093 1px solid;
    overflow:hidden;
}
.third-div{
    border:#F00 1px solid;
    /**see line height. we change the default line height**/
    line-height:40px;
}
.third-div span{
    /**see line height. line height 40px set in the parent will be used**/
    display:inline-block;
    border:#093 1px solid;
    overflow:hidden;
}
</style>
<div class="first-div">
First Div
<span>First Span</span>
</div>
<br/>
<div class="second-div">
Second Div
<span>Second Span</span>
</div>
<br/>
<div class="third-div">
Third Div
<span>Third Span</span>
</div>