小div和图片之间有一个缝隙,怎么改都消除不掉,请问老师是怎么做到的

小div和图片之间有一个缝隙,怎么改都消除不掉,请问老师是怎么做到的

<!DOCTYPE html>
<html>
<head>
    <!-- 此处编写样式 -->
    <meta charset="UTF-8">
<title></title>
    <style type="text/css">

#div{
            border: 1px dashed grey;
            width: 830px;
            float: left;
}

#div1,#div2,#div3,#div4,#div5,#div6{
            width: 250px;
            border: 1px solid grey;
            margin: 0px 0px 20px 20px;
            padding: 5px 5px 5px 5px;
            box-sizing: border-box;
            float: left;
            text-align: center;
            
        }
        p{
             margin-top:0px;
             margin-bottom: 0px;
        }
        #div1,#div2,#div3{
    margin-top:20px;
}
#div1,#div4{
margin-left: 20px;
}
</style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div id="div">
<div id="div1"><img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div2"><img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div3"><img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div4"><img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p></div>
<div id="div5"><img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p></div>
<div id="div6"><img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p></div>
</div>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5f817840086ca74511420595.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕小尤 2020-10-10 18:00:07

同学你好,1.老师在谷歌、360、火狐浏览器(分辨率100%)中测试是没有问题的,如下图所示:

http://img1.sycdn.imooc.com//climg/5f81855f0912063908480296.jpg

建议同学查看浏览器的分辨率是多少?如果不是100%,则建议同学调整为100%,然后重新进行尝试。如下所示:

http://img1.sycdn.imooc.com//climg/5f8184d509985b3a03010253.jpg

注:在125%分辨率下是会存在同学描述的问题,同学可以将其忽略,在正常的分辨率下没有间隙即可。

2. 如果不是分辨率的问题,则建议同学尝试在img中添加display:block属性。

祝学习愉快!

  • 提问者 慕嘟嘟 #1
    谢谢老师耐心的解答,确实是我浏览器的问题,我用的chrome,,分辨率放大一点就没有缝隙了,可能是我的笔记本屏幕太小了
    2020-10-11 00:14:33
好帮手慕小尤 2020-10-10 17:21:37

同学你好,建议同学去除#div1,#div2,#div3,#div4,#div5,#div6中的内边距,然后为图片设置宽度。修改后代码如下所示:

http://img1.sycdn.imooc.com//climg/5f817cfc0967e77a04910303.jpg

祝学习愉快!

  • 提问者 慕嘟嘟 #1
    改完以后图片和边框之间的左边距和上边距还是会有1px的空隙,而右边距是没有的,没有别的更好的解决办法了吗
    2020-10-10 17:29:55
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师