解决img标签自带外边距问题

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

目录

• 方法一：给img标签加“display: block”
• 方法二：给img标签的父容器指定高度
• 方法三：将img标签父容器的font-size设置为0，其他子元素的字号另外设置
• 写在最后

<div id="img">
    <img src="./img.jpg" alt="" srcset="">
</div>
<div id="bottom"></div>

<style>
    #img img{
        height: 100px;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

页面效果：

图1-img的高度是100px

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

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

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

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

<style>
    #img img{
        height: 100px;
        display: block;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

页面效果：

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

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

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

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

<style>
    #img{
        height: 100px;
    }
    #img img{
        height: 100px;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

页面效果如上面图3。

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

将img标签父容器的font-size属性设置为0，如果父容器内有其他子元素需要设置字号可以另外设置，这样同样可以去除div父容器内img标签底部的那条“白边”。
这一方法也可以解决两个inline-block元素之间出现空白间距的问题。

<style>
    #img{
        font-size: 0;
    }
    #img img{
        height: 100px;
    }
    #bottom{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

页面效果如上面图3。

写在最后

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

GitHub地址：https://github.com/ljxlijiaxin.