首先, img 标签是块元素、行内元素还是行内块元素?
可以肯定的说,img 标签确实是一个行内元素(不是我定义的,自己查官方文档)
但是也许有人好奇为啥 img 作为一个行内元素又可以设置宽高?
因为它不仅是一个行内元素,还是一个可替换元素(不是我定义的,自己查官方文档)
可替换元素:
- 浏览器根据元素的标签和属性,来决定元素的具体显示内容
就像文档中说的一样,img 标签就是一个可以设置宽高的行内元素,所以它就像行内块元素一样
接下来再来分析一下 margin: 0 auto; 生效的条件
- 元素需要是一个块级元素
- 元素具有宽度
所以对于 img 标签来说,想要使用 margin:0 auto 来实现居中效果需要添加如下代码:
<style>
img {
//不用刻意添加 width 是因为 img 标签是可替换元素有内置的宽度
display: block; //将行内元素转为块级元素
margin: 0 auto;
}
</style>
亲测!少了display: block;无法实现居中!
在经过实践以后我认为 img 标签被认为是行内块元素是错误的概念,它只是像而已,就像双胞胎一样就算很像但始终不是一个人,如果我有错误的地方欢迎指正!