为什么img标签要转成块级元素margin才会有效？
老师，img标签是行内块元素，当不转成块级元素时，为什么margin就没有效果了（即没有居中显示）？它不是既具有块级元素的特征(可以设置宽高，内外边距)，又有行内元素的特征（在一行上显示）。为什么一定要转成块级元素后，margin才会生效？
7
收起
正在回答
1回答
同学你好，理解的偏了。img是行内块元素，所以可以设置margin-left、margin-right等，margin有效。只是margin:0 auto这种设置元素水平居中的方式，只适用于块级元素（该样式的特点，知道就行了），所以要把img转成块级元素。
祝学习愉快！
-
都是有效的，可以通过代码，解答自己的疑惑，比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 600px; height: 600px; border:1px solid red; } img{ width: 200px; } </style> </head> <body> <div> <p>我是文字</p> <img src="img/1.jpg" alt=""> <p>我是文字</p> </div> </body> </html>img不设置margin、padding的情况下，垂直方向，是紧挨着两个p标签显示的：
当设置其中一项时，img就会与某一个p有间隔了，比如:
同学自己测试一下。
2023-11-30 13:59:10
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星