为什么我设置上下外边距会导致上面顶下来?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .con{
    	width: 100%;
    	max-width: 1000px;
    	border: solid 5px green;
    	margin:100px auto;
    	font-size: 0;
    }
    /*设置第一行*/
    .con .That1{
        background: #add8e6;
    }
    .con .That1 .picture1{
      width: 760px;
      margin:0 auto;
    }
    .con .That1 .picture1 img{
      margin: 20px 0;
    }
    .con .That1 .picture1 img.picture-img1{
      margin-right: 40px;
    }
    /*设置第二行*/
    .con .That2{
      background: #ffb6c1;
      height: 200px;
    }
    .con .That2 .picture2{
      width: 800px;
      margin:20px auto;
      height: 100px;
      
    }
    .con .That2 .picture2 img{
      margin:40px 100px 40px 0;
    }
    .con .That2 .picture2 img.picture-img3{
      margin-right: 0;
    }
  </style>
</head>
<body>
	<!-- 内容区域 -->
    <div class="con">
    	<!-- 第一行 -->
    	<div class="That1">
    		<!-- 规定img为一个盒子 -->
    		<div class="picture1">
    			<img class="picture-img1" src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
    			<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
    		</div>
    	</div>
    	<!-- 第二行 -->
    	<div class="That2">
    		<!-- 规定img为一个盒子 -->
    		<div class="picture2">
    			<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
    			<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
    			<img class="picture-img3" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
    		</div>
    	</div>
    </div>
</body>
</html>

萌神丶kin 2019-09-19

源自：CSS网页布局基础 2-14 编程练习

收起

5回答

好帮手慕言回答被采纳获得+3积分 2019-09-20 10:59:39

同学你好，同学这样理解是可以的。

在一个父子元素结构里，如果子元素设置了margin-top值会出现一个问题，就是子元素的margin-top会传递给父级元素。

同学的代码就是发生了margin传递哦。

建议：给父元素设置溢出隐藏就可以解决了。

代码参考：

2、使用同学提供的代码测试，是没有实现练习效果的哦。从图中可以看出间距是不一样的

建议：

祝学习愉快~

收起回答

萌神丶kin 提问者 #1

额。好吧。图片与盒子的左右边距是一样的。以为左右俩边边距一样就可以了。中间也要一样吗。额

2019-09-20 13:06:24

好帮手慕言 2019-09-20 14:02:04

同学你好，从效果图上可以看出，间距是都相等的哦。

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

提问者萌神丶kin 2019-09-19 23:54:11

我研究了一下.
这个问题的原因是不是,当子元素的边和父元素重叠时.他们的上下外边距会合并(子元素的外边距设置会应用到父元素或者祖先元素身上.发生重叠)
overflow: hidden;可以解决这个问题?

收起回答

提问者萌神丶kin 2019-09-19 23:29:14

无论怎么改, 上外边距都是顶的上一个元素.不是顶父元素吗

收起回答

提问者萌神丶kin 2019-09-19 23:20:08

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .con{
    	width: 100%;
    	max-width: 1000px;
    	margin:100px auto;
    	font-size: 0;
    }
    /*设置第一行*/
    .con .That1{
        background: #add8e6;
    }
    .con .That1 .picture1{
      width: 760px;
      margin:0 auto;
    }
    .con .That1 .picture1 img{
      margin: 20px 0;
    }
    .con .That1 .picture1 img.picture-img1{
      margin-right: 40px;
    }
    /*设置第二行*/
    .con .That2{
      background: #ffb6c1;
    }
    .con .That2 .picture2{
      width: 800px;
      margin:0 auto;   
    }
    .con .That2 .picture2 img{
      margin:40px 100px 40px 0;
    }
    .con .That2 .picture2 img.picture-img3{
      margin-right: 0;
    }
  </style>
</head>
<body>
	<!-- 内容区域 -->
    <div class="con">
    	<!-- 第一行 -->
    	<div class="That1">
    		<!-- 规定img为一个盒子 -->
    		<div class="picture1">
    			<img class="picture-img1" src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
    			<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
    		</div>
    	</div>
    	<!-- 第二行 -->
    	<div class="That2">
    		<!-- 规定img为一个盒子 -->
    		<div class="picture2">
    			<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
    			<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
    			<img class="picture-img3" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
    		</div>
    	</div>
    </div>
</body>
</html>

效果是实现出来了,请老师检查,
但是上面那个问题,我没搞懂

收起回答