img标签是什么元素?为何margin: 0 auto;对img标签失效?(含解决方法)

首先, img 标签是块元素、行内元素还是行内块元素?

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

img标签是什么元素?为何margin: 0 auto;对img标签失效?(含解决方法)

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

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

img标签是什么元素?为何margin: 0 auto;对img标签失效?(含解决方法)

 可替换元素:

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

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

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

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

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

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

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

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

上一篇:vue 学习小记


下一篇:CentOS7 PHP+Redis实现Session共享