为什么我可以在css中为图像添加边距，尽管图像是内联元素

Question

我在某个地方读到，由于图像是内联元素，所以不能向它们添加边距。使用以下代码，我可以为我的图像添加边距。为什么会这样？

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

<div>
<img src="https://picsum.photos/200/300" alt="" />
</div>

Answer 1

因为<img>是被替换的元素；默认情况下，它的显示值为inline，但它的默认尺寸是由嵌入图像的内在值定义的，就像它是inline块一样。您可以在<img>上设置边框/边框半径、填充/边距、宽度、高度等属性。