为何块级元素内的行内元素会出现额外边距/内边距？

这个现象的核心是行内框与块级框的布局规则差异，具体拆解如下：

• 当行内元素嵌套行内元素时，所有元素都属于「行内框」范畴，它们的布局完全围绕文字的基线（baseline）对齐，背景会严格贴合文字的内容区域，视觉上不会出现额外空白。
• 但把行内元素放在块级元素里时，块级元素的**默认行高（line-height）**会撑起整个行框（line box）的高度。浏览器默认的行高通常比文字的实际内容高度要高，而行内元素的背景只覆盖自身的内容区域，行框中超出内容高度的部分就会形成上下的空白。当视口放大到500%时，像素被放大，原本细微的空隙就变得肉眼可见了。
• 你可以做个小验证：给块级元素设置line-height: 1;，或者把行内元素改成display: inline-block;，这时候上下的空白就会消失——前者让行框高度完全贴合文字内容，后者把行内元素变成了块级行内框，背景会填充整个行框高度。

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