CSS规定行内元素上下margin不生效 为何img行内元素却能生效？

核心本质：行内元素的分类规则差异 #

• CSS规范中「行内元素垂直margin不生效」的规则，仅适用于不可替换行内元素，例如<span>、<a>、<em>这类内容直接嵌入在标签内部的行内元素，这类元素的垂直margin不会参与行高计算，所以视觉上没有效果。
• <img>属于可替换行内元素，这类元素的渲染内容不直接写在标签里，由元素属性（如src）加载外部资源生成，浏览器会为其生成独立的有固定尺寸的盒模型，和块级元素的盒模型计算逻辑一致，因此margin、padding的四个方向设置都可以正常生效。

主动设置display: inline依然生效的原因 #

display: inline仅指定元素的布局类别为行内，不会改变元素「可替换」的属性本质。只要是可替换元素，不管布局类别是行内还是行内块，都会遵循可替换元素的盒模型计算规则，垂直方向的margin、padding都会正常生效，也会撑开所在行的行高。

除<img>外，常见的可替换元素还包括<input>、<select>、<canvas>、<video>、<iframe>等，都符合上述规则。

验证对比代码 #

你可以通过以下代码直观看到两类行内元素的差异：

<!-- 不可替换行内元素：margin-top 无视觉效果 -->
<span style="margin-top: 30px; background: #f0f0f0;">普通行内元素</span>
<br>
<!-- 可替换行内元素：即便显式设display: inline，margin-top 正常生效 -->
<img 
  src="https://i.imgur.com/ZrTU3VK.jpeg" 
  alt="测试图"
  style="display: inline; margin-top: 30px; width: 100px;"
>

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