Usubeni Fantasy：用 Strut 与 IFC 理解 CSS 行盒中的额外空间（ssshooter-css-strut-ifc）
看起来多出来的空白从哪里来
文章从一个常见的排版疑问出发：子元素没有设置 padding 或 margin，为什么它周围仍然出现上下留白？示例中，父级块容器设置较大的字号与行高，内部只有一个字号较小的 inline-block。若只看子元素自身内容高度，容易以为父元素也应该很矮；实际渲染结果却会被父级行高撑开。
理解这类现象，需要从“盒子外边距”转向“行盒如何形成”。在包含行内级内容的块容器中，浏览器要为一行内容确定高度和基线。行盒的高度并不总是等于某个子元素的高度，而是受到父级文字排版属性和行内参与者共同影响。空白看上去像是附着在子元素周围，实际可能来自整行的布局规则。
父级行高与 Strut
Usubeni Fantasy 的示例中，父元素字号为 42px，行高为 1.5，因此父级行高计算为 63px；子元素字号为 12px，自己的行高为 1.5em，因此内容行高为 18px。即使父级没有直接文本节点，它参与行内排版的默认高度仍会影响行盒。
CSS 中常用 strut（支撑）来解释这个看不见的参与者。可以把它理解为与块容器字体和行高相关的匿名行内盒：它不显示字符，却为行盒提供父级的文字度量。于是只有一个小型 inline-block 的场景，也可能仍受到父元素较大 line-height 的影响。它不是子元素自动增加了 margin，也不一定是浏览器绘制错误。
这个概念有助于解释为什么把父子元素的背景色打开后，会看到似乎不属于内容本身的空间。父容器展示的是行盒占据的区域，子元素背景只覆盖自己的盒子；两种背景范围不同，就更容易显出行高差异。
IFC 如何组织行内内容
IFC 是 Inline Formatting Context（行内格式化上下文）的简称。它用于处理行内内容的排列与换行，包括文字、行内元素和行内级盒子。浏览器需要把这些参与者放进一行，在空间不足时决定如何换行，并计算每一行的高度和基线。
当一行中只有普通文字时，字体度量和行高共同决定文字周围的排版空间；加入 inline-block 后，它也成为行内排版的一部分。行盒需要同时容纳不同大小的参与者，并处理它们之间的对齐关系。父级 strut 继续提供行高基准，因此单个小元素也无法简单决定整行高度。
基线对齐带来的视觉效果
文章进一步说明，inline-block 会参与所在行的对齐，通常会与文本基线建立关系。基线是字形排版中用于排列文字的重要参考线，不等同于盒子的顶部或底部。不同字号、行高和盒子尺寸混排时，浏览器需要找到一种方式让内容沿基线组合，同时保证行盒足以容纳其参与者。
如果只比较子元素的背景矩形，可能会误以为元素上下偏移或出现了多余空白。此时应同时观察父级行盒、子元素盒子和基线，而不是只检查 margin 和 padding。把不同背景和边框临时应用到示例元素上，能够帮助区分行盒占据的空间与元素自身盒模型的空间。
更长的文本会进一步显示 IFC 的作用。行内内容可能换成多行，每行都有自己的行盒；较大的行内元素也可能改变相邻文本所在行的高度。排查布局时，最好从最小可复现示例开始，再逐步加入真实内容、字体和容器宽度，确认问题究竟来自行高、基线还是其他 CSS 规则。
使用 line-height 的排查方法
遇到“没有 margin 但看起来有空白”的情况，可以依次检查父级与子级的 font-size、line-height、display 和 vertical-align。父级行高可能来自继承或单位计算；子级的 em 行高会依据自身字号换算；inline-block 又会参与行内格式化上下文。逐项记录计算后的像素值，比反复添加负 margin 更容易找到原因。
可以创建一个只包含父容器和单个 inline-block 的最小页面，分别给父子元素设置背景色，再尝试修改父级 line-height。观察父容器高度是否变化、子元素位置是否随之移动。随后加入一段普通文字，再改变子元素字号或垂直对齐方式，比较行盒如何响应。每次只改变一项属性，有助于确认因果关系。
不要把某个补偿性样式当成通用修复。减小父级 line-height、修改 vertical-align 或改变 display 可能解决当前截图中的视觉问题，却也可能影响其他文本换行、可访问性或不同字号下的布局。先理解额外空间由谁贡献，再决定样式是否符合设计意图。
从概念连接到真实页面
strut 和 IFC 看起来像浏览器内部术语，但它们能解释很多日常 CSS 现象：按钮中的图标与文字为何不齐、inline-block 周围为何保留空间、父元素高度为何大于子元素，以及不同字号的混排为何改变行距。掌握这些概念后，开发者可以更有条理地分析文字、图标和小组件之间的垂直布局。
Usubeni Fantasy 的技术文章以实例讲解前端开发中的机制问题，首页还列出 Tauri 签名、XSS 与 CSP、React 状态订阅等内容，并通过项目区展示 Mind Elixir、SS Toolbox 等工具。对正在排查布局的读者，CSS Strut 与 IFC 文章提供了一条从可见空白回到格式化上下文和基线关系的思考路径。
小结
行内排版的高度由行盒规则决定，并不一定等于其中最小盒子的内容高度。父级字号和 line-height 所形成的 strut 会参与 IFC 中的行盒计算，inline-block 则作为行内级盒子参与对齐。理解这些关系，可以避免把所有额外空间都归因于 margin 或 padding。
当布局表现与直觉不符时，先拆解父级行高、子级行高、基线和格式化上下文，再用最小页面逐项验证。Usubeni Fantasy 的这篇文章适合前端开发者作为 CSS 排版机制的入门案例，也可以作为理解复杂文字与组件混排问题的排查参考。