为何<a>与<p>标签间添加单个<br>标签不产生空行？

原始代码 #

<a href="google.com">google</a>
<br />
<a href="google.com">google</a>
<br />
<p>This is first paragraph.</p>
<br />
<p>This is another paragraph.</p>

问题核心原因 #

这事儿本质是浏览器的默认样式规则和空白处理逻辑在起作用，分三点拆解：

1. <p>标签的默认外边距
   浏览器给<p>预设了margin-top和margin-bottom（通常是1em左右），<p>作为块级元素本身就会强制开启新的块级上下文、占据整行。当单个<br>紧跟在行内元素<a>后面衔接<p>时，<br>产生的微小换行空间直接被<p>的默认上边距覆盖，视觉上就跟没加<br>一样。

2. 单个
   被“抵消”的验证
   你可以手动去掉<p>的默认上边距，就能看到单个<br>的效果：

<a href="google.com">google</a>
<br />
<p style="margin-top: 0;">This is first paragraph.</p>

这时候<a>和<p>之间的换行空白就会显现出来，证明之前是默认外边距“吃掉”了<br>的换行空间。

3. 多个
   生效的逻辑
   当添加多个<br>时，每个标签都会生成独立的换行空白，这些空白的总和超过了<p>默认上边距的“覆盖范围”，多余的垂直空间就会显示为多行空行。

总结 #

• 单个<br>的换行空间被<p>的默认上边距完全覆盖，视觉无变化
• 多个<br>的累计空白超出了默认外边距的范围，因此能看到空行
• 块级元素的默认样式和浏览器的空白折叠规则是背后的核心逻辑

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