为何行内元素img可在CSS中设置margin属性？

嗨，这个问题问得特别到位！其实你之前听到的“行内元素无法添加margin”是个不完全准确的说法——行内元素分为两类，它们的盒模型表现差异很大：

1. 普通行内非替换元素（比如<span>、<a>） #

这类元素的margin只有左右方向会生效，上下方向的margin不会影响布局，因为它们的高度由line-height控制，上下外边距无法推开垂直方向的其他元素。比如你写这段代码：

<span style="margin: 100px; background: pink;">我是普通行内元素</span>

你会发现它的上下没有外边距，只有左右有。

2. 行内替换元素（比如<img>、<input>） #

<img>就属于这类元素，它们的内容是外部资源（比如图片文件），浏览器会根据资源的实际尺寸或者你设置的width/height来计算元素的盒模型。这类元素的margin规则更接近块级元素，上下左右四个方向的margin都能正常生效，所以你写的：

img {
  width: 200px;
  margin: 100px;
}

会让图片四周都产生100px的外边距，完全符合预期。

简单总结：不是所有行内元素都不能用margin，只是普通行内非替换元素的上下margin不生效，而行内替换元素的margin是全方位有效的~

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