前几天的晚自习作业遇到这样一个问题,在没有设置任何内边距,外边距的情况下,图片和div块元素之间会出现一些间隙,为此和同学讨论到了十一点多才解决了这个间隙问题(真是一把辛酸泪……),来吧,一起看看这些间隙问题,并干掉它!
情况一:块元素中放图片,父子关系
代码如下:
Document/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
}
运行结果及检测如下:图片高度为191,div块未设置高度,高度应由内容撑开,本该div高度也为191,但实际检测结果却比191大(惊!!!),如下图↓
至于原因,目前我还没搞清楚,也没查到,只知道解决他们间隙的办法,还有一点要提的是,在不同浏览器中,图片与div间隙的大小也不同哦~,想要知道具体值,自己手动测试一下吧,下面我们来讲一讲如何解决这个间隙问题!
解决方案:
给图片添加一个上外边距,注意是负值!!!
运行结果:
把图片转为块元素
运行结果:
情况二:图片与块元素是兄弟关系
代码如下:
Document/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
}
div{
height: 200px;
width: 200px;
background-color: red;
}
运行结果:
解决方案:
给块元素添加上外边距,注意是负值!!!
将图片转为块元素,间隙问题同样解决
完结!撒花~ 哦吼,自己动手试试吧~
本文地址:https://blog.csdn.net/qq_45587146/article/details/109564903