gpt4 book ai didi

css - 内联 block 非替换元素的对齐框

转载 作者:行者123 更新时间:2023-11-28 10:09:51 26 4
gpt4 key购买 nike

请运行演示:

* {
margin: 0;
padding: 0;
}

.body {
font-family: Microsoft Yahei;
font-size: 16px;
background-color: lightblue;
height: 400px;
width: 400px;
line-height: 2;
vertical-align: baseline;
}

.body span {
background-color: pink;
}

.body .inline-block {
display: inline-block;
background: orange;
height: 50px;
}

.inline-block.text {
vertical-align: text-top;
}
<div class="body">
<span>
words-g words words-g
<span class="inline-block text">with inline-block box child</span> words-g w
</span>
</div>

重点是我设置

.inline-block.text {
vertical-align: text-top;
}

根据specification :

In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.

在“行高”部分:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

所以,在这种情况下,.inline-block.text是一个

  • 内容由行内元素组成的 block 容器元素
  • 高度为50px,行高为32px
  • 也是一个内联不可替换元素

这是我的问题:

the box used for alignment is the box whose height is the 'line-height'

  1. 在这种情况下,.inline-block.text 上面的方框指向什么?

如演示所示,我认为是高度为 50px 的框。但是,盒子的高度不是行高,这与上面的规范冲突。所以,我一头雾水,看不懂规范中的上面这句话。

  1. 如果你认为上面的框是高度为50px的框,你如何解释高度50px不是行高32px的事实?

请注意:

  • 我只是想理解这句话是用于对齐的框是高度为'line-height'的框,这样我可以更好地理解vertical-align。

  • 我不要求特定的解决方案。

谢谢你的帮助!

最佳答案

声明

for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height'

不适用于行内 block 。行内 block 不是行内元素。内联元素是带有display:inline的元素,生成内联框。行内 block 不是行内框,而是行内级别(“级别”部分很重要!) block 容器。因此,声明

For all other elements, the box used for alignment is the margin box.

适用,这会导致 vertical-align: text-top 导致内联 block 的顶部外边缘与行框的顶部对齐。

规范中适用于行内元素的任何部分不适用于行内 block 。

关于css - 内联 block 非替换元素的对齐框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50421311/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com