麻烦老师看下怎么可以使图片与图片的距离就等同于图片与盒子的左右边距?

麻烦老师看下怎么可以使图片与图片的距离就等同于图片与盒子的左右边距?

<!DOCTYPE html>

<html>

<head>

      <meta charset="UTF-8">

      <title>Document</title>

      <style type="text/css">

            *{padding: 0;margin:0;}

            .container{

                  width: 1000px;

                  height: 850px;

                  margin: 0 auto;

                  position: absolute;

                  top: 50%;

                  left: 50%;

                  margin-top: -425px;

                  margin-left: -500px;

            }

            .top{

                  width: 1000px;

                  height:600px;

                  background-color: lightskyblue;

            }

            .bottom{

                  width: 1000px;

                  height: 250px;

                  background-color: pink;

            }

            

            .top img{

                  width: 455px;

                  height: 560px;

                  margin: 20px 20px;

            }

            .bottom img{

                  width: 250px;

                  height:200px;

                  margin:25px 40px;                

            }

                 

            

      </style>

           

            

</head>

<body>

     <div class="container">

           <div class="top">

                 

                       <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">

                

                 

                       <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">

                

           </div>

           <div class="bottom">

                 <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">

                 <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">

                 <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">

           </div>

     </div> 

</body>

</html>

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

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

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

1回答
好帮手慕嘟嘟 2019-08-15 14:27:43

同学你好,

①  可以将图片的左右边距去掉一个,因为这样就可以使得图片和图片之间的距离不是两个边距的和。

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

效果:

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

如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~


  • 提问者 cici_gong #1
    谢谢老师我按照你说的方法可以实现呢,不过一般是不是使右边距为零比较好? 因为我有试过使左边距为零,结果图片左边直接与盒子贴紧,后面可以设置什么再达到你所示的图片效果?
    2019-08-15 15:08:05
  • 好帮手慕嘟嘟 回复 提问者 cici_gong #2
    同学你好,① 设置左右边距都是可以的,仅仅是设置边距为零不存在性能问题,所以没有说右边距为0比左边距为0好哦~ ② 设置左边距为0,图片会紧挨着盒子,这样同学可以给第一个图片单独设置样式(设置单独的类名或者使用选择器都可以),让它和盒子之间有距离就可以啦。希望能帮到你
    2019-08-15 16:36:45
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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