img标签默认有外边距吗_解决img标签自带外边距问题

三种方法去除img标签自带外边距。

#img img{

height: 100px;

}

#bottom{

width: 100px;

height: 100px;

background-color: red;

}

页面效果：

图1-img的高度是100px

图2-父容器div的高度却是104px

第一个div中包裹img标签，img标签的高度设置为100px，但是第一个div的高度却是104px。上面图1中可以看到两个div之间出现了一条“白边”，这个边距并不是我们设置的，而不同浏览器解析出来的这条“白边”的距离可能是不相同的，这就非常地影响我们布局。在实际布局中经常会遇到这个问题，该如何解决呢？这里给出三种方法来去除img标签自带的这条“白边”。

方法一：给img标签加“display: block”

只需要给img标签加上“display: block”即可，代码和页面效果如下：

#img img{

height: 100px;

display: block;

}

#bottom{

width: 100px;

height: 100px;

background-color: red;

}

页面效果：

图3-两个div之间的“白边”不见了

可以看到，两个div之间的“白边”不见了。

方法二：给img标签的父容器指定高度

手动给img标签的父容器指定高度，这里将其高度设置为100px，和img标签相同，同样可以去除两个div之间的“白边”。

#img{

height: 100px;

}

#img img{

height: 100px;

}

#bottom{

width: 100px;

height: 100px;

background-color: red;

}

页面效果如上面图3。

方法三：将img标签父容器的font-size设置为0，其他子元素的字号另外设置

将img标签父容器的font-size属性设置为0，如果父容器内有其他子元素需要设置字号可以另外设置，这样同样可以去除div父容器内img标签底部的那条“白边”。

这一方法也可以解决两个inline-block元素之间出现空白间距的问题。

#img{

font-size: 0;

}

#img img{

height: 100px;

}

#bottom{

width: 100px;

height: 100px;

background-color: red;

}

页面效果如上面图3。

写在最后

以上为全部内容，感谢阅读。

本博文仅为学习记录和分享交流，如有错漏，还请帮忙指出，也欢迎更多补充，不胜感激。