为何块级元素场景下图片底部仍有间隙？行内格式化上下文触发疑问

问题背景 #

MDN中关于img元素的CSS样式说明提到：

<img> 没有基线，因此当图片在**行内格式化上下文（IFC）**中使用 vertical-align: baseline 时，图片底部会被对齐到文本基线。

实际代码场景：

p {
    border:  5px red solid;
    margin: 0;
}

<img src="https://images.unsplash.com/photo-1661177405620-24e65f27ac0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" width="250px" />
<p>This is a paragraph with a gap above it</p>

疑问：明明用了块级元素<p>触发块格式化上下文（BFC），图片底部仍有间隙；且按理解只有IFC下才会出现这种间隙，想知道此场景下IFC如何触发，以及BFC为何无效。

核心解惑 #

1. 间隙的根源：img是替换行内元素，默认处于IFC中 #

img属于「替换行内元素」，即使没有和其他文本同行，它在页面中的布局依然遵循行内格式化上下文的规则：

• 浏览器会给行内元素所在的行框预留出基线下方的 descender 空间（用于容纳字母y、g这类下伸的字符）
• img默认的vertical-align值是baseline，而img本身没有基线，所以会把图片底部对齐到文本基线，导致基线下方的预留空间表现为图片底部的间隙。

2. 为什么<p>的BFC没用？ #

<p>的BFC仅作用于<p>内部的布局，它不会影响外部元素（这里的img）的上下文。img是<body>的直接子元素，处于<body>创建的匿名块容器中，和<p>属于同级的块级元素，两者的上下文相互独立，所以<p>的BFC无法改变img所在的IFC规则。

3. 此场景下IFC的触发逻辑 #

当块级容器（这里是<body>的匿名块盒）的子元素是行内级元素（包括替换行内元素如img、input，以及普通行内元素如span、文本节点）时，浏览器会自动为这些行内级元素创建行内格式化上下文。简单说：只要元素是行内级的，它所在的块容器就会为其启动IFC布局规则，和是否有其他文本元素无关。

补充：解决间隙的常见方法 #

• 修改img的vertical-align值，比如设为bottom/middle/top
• 把img转为块级元素：display: block
• 减小img所在容器的line-height至0，或者设置font-size: 0

内容的提问来源于stack exchange，提问作者Totopo