img标签是什么元素？为何margin: 0 auto；对img标签失效？（含解决方法）

首先， img 标签是块元素、行内元素还是行内块元素？

 可以肯定的说，img 标签确实是一个行内元素（不是我定义的，自己查官方文档）

 但是也许有人好奇为啥 img 作为一个行内元素又可以设置宽高？

 因为它不仅是一个行内元素，还是一个可替换元素（不是我定义的，自己查官方文档）

 可替换元素：

• 浏览器根据元素的标签和属性，来决定元素的具体显示内容

就像文档中说的一样，img 标签就是一个可以设置宽高的行内元素，所以它就像行内块元素一样 

 接下来再来分析一下 margin: 0 auto; 生效的条件

• 元素需要是一个块级元素
• 元素具有宽度

所以对于 img 标签来说，想要使用 margin:0 auto 来实现居中效果需要添加如下代码：

<style>
        img {
            //不用刻意添加 width 是因为 img 标签是可替换元素有内置的宽度
            display: block;   //将行内元素转为块级元素
            margin: 0 auto;
        }
</style>

亲测！少了display: block;无法实现居中！

在经过实践以后我认为 img 标签被认为是行内块元素是错误的概念，它只是像而已，就像双胞胎一样就算很像但始终不是一个人，如果我有错误的地方欢迎指正！