三种方法去除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。
写在最后
以上为全部内容,感谢阅读。
本博文仅为学习记录和分享交流,如有错漏,还请帮忙指出,也欢迎更多补充,不胜感激。