为什么总感觉图片和div框没对齐有缝隙

为什么总感觉图片和div框没对齐有缝隙

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

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
    <style>
        *{margin:0;padding:0;}
        .big{width:800px;border:1px gray dashed;overflow:hidden;zoom:1;}
        .div1,.div2,.div3,.div4,.div5,.div6{float:left;margin:12px;border:1px gray solid;line-height:20px;padding-bottom:5px;
        }

    </style>
</head>
<body>   
        <!-- 此处写代码 -->  
    <div class="big">
        <div class="div1"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" /><br/>
        欢迎来到慕课网学习新知识!</div>
        <div class="div2"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" /><br/>
        欢迎来到慕课网学习新知识!</div>
        <div class="div3"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" /><br/>
        欢迎来到慕课网学习新知识!</div>
        <div class="div4"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" /><br/>
        欢迎来到慕课网学习新知识!</div>
        <div class="div5"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" /><br/>
        欢迎来到慕课网学习新知识!</div>
        <div class="div6"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" /><br/>
        欢迎来到慕课网学习新知识!</div>
    </div>
</body>
    
</html>


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

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

2回答
好帮手慕糖 2018-10-08 11:47:28

你好,浏览器放大的话,页面的比例会改变,布局就会错乱,所以不建议放大浏览器查看效果。另,设置display:block;无法解决问题吗?这里也是使用谷歌浏览器测试的,没有边框分离的效果哦,例:

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

祝学习愉快!

  • 提问者 慕沐6333144 #1
    加了 img{ display: block; } 效果还是一样的
    2018-10-08 16:22:56
  • 好帮手慕糖 回复 提问者 慕沐6333144 #2
    你好,这里谷歌与火狐都进行了测试,没有边框与图片分离的情况哦。 祝学习愉快!
    2018-10-08 16:28:13
好帮手慕糖 2018-10-06 09:50:37

你好,1、是指图片没有与边框紧挨着,有缝隙是么?如下,我这里测试,是没有这种情况的,不知道是否是图片本身的边框引起的,建议:可以参考如下,给图片设置display属性,去掉图片本身的内外边距,若还是无法解决,建议:可以详细的说明下问题,已经使用哪个浏览器进行测试的。

http://img1.sycdn.imooc.com//climg/5bb814140001dcb603100188.jpghttp://img1.sycdn.imooc.com//climg/5bb813f200018b1302670090.jpg

2、大盒子的宽度建议:可以在稍微调整下,一个小盒子占据的的宽度是266px(包括左右边框与左右外边距),一行三个266*3=798px,所以建议:最外层的大盒子的宽度可以设置为798px。

祝学习愉快!

  • 提问者 慕沐6333144 #1
    感觉是chrome的问题,放大了看是好的200%以上比例看是满的,200%以下就有这个问题
    2018-10-07 18:11:18
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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