提问人：gus 提问时间：5/26/2023 最后编辑：gus 更新时间：5/26/2023 访问量：65
为什么内联级框与其父内联级框位于同一行框中？[复制]
Why is an inline-level box in the same line box as its parent inline-level box? [duplicate]
问：
文档指出，这些框（同级）在内联布局中一个挨着另一个分布，
内联格式上下文由块容器框建立 不包含块级框。在内联格式设置上下文中，框一个接一个地水平布局，从 包含块的顶部。水平边距、边框和内边距 在这些盒子之间受到尊重。这些框可以垂直对齐 以不同的方式：它们的底部或顶部可以对齐，或者 其中的文本基线可以对齐。矩形区域 包含构成线的框的框称为线框。
但是，它在哪里说一个框 （） 将与其父框 （） 放在同一行框上？inline-level#childinline-level#parent
<div>
<span id="parent">
Hi
<span id="child">Hello</span>
</span>
</div>我知道兄弟姐妹框彼此相邻，但内联布局中的父子关系我不明白。inline-level
答：
-1赞
cjs
5/26/2023
#1
默认情况下，span 显示为内联块，因此当您在其中添加额外的 span 时，它将自动显示在同一行中。
以下是一些视觉示例，以便您更好地理解它：
#secondChild{
display: block;
}<div>
<span id="parent">
Hi
<span id="child">Hello</span>
</span>
</div>
<div>
<p id="pParent">
Hi
<span id="pChild">Hello</span>
</p>
</div>
<div>
<span id="secondParent">
Hi
<span id="secondChild">Hello</span>
</span>
</div>
评论