图片img到底是块级还是内联

现在就来说说,这个问题,

先来写个img标签和div

 <img src="1tplv3TZP.jpg" />
<img src="1WAsk3WWCAY.jpg" />
    <div></div>

然后在给个样式

  img{
            height:200px;
            width:300px;
           
            }
        .div{
            background:#ff6a00;
            height:200px;
            width:300px;
        }

先来看看效果


是不是可以很明显的看到img下面有个距离,

再来说说图片到底是块级还是内联

如果说他是块级,那她为什么图片可以干行内的事,可以并排呢?
如果说他是行内,那她为什么又可以设置宽高呢,大家都知道,行内元素是不能设置宽高的,
所以这个img是确实是个行内元素,但是他是个特殊的行内元素,可以说他是个可以设置宽高的行内元素吧,他叫替换行内元素。

那再来说说,怎么解决这个问题,

第一,首先肯定会给img设置margin和padding都为0,

 img{
            height:200px;
            width:300px;
            margin:0;
           padding:0;
            }

但是呢,是不是没什么卵用。

肯定一般也都会想到使用margin负值消除

这里就不做演示了 ,

下面,就来说说最好的解决办法

那就是把img设置为小快快

 img{
            height:200px;
            width:300px;
           display:block;
            }

然后再来看看,

是不是没有了

end

另外那两张演示图片附上 😀

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注