老师，为什么我这里相邻的两元素外边距不会重叠呢？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
 
    .container {
        width: 900px;
        height: 600px;
        background-color: white;
        margin: 0 auto;
    }
 
    .top {
        width: 900px;
        height: 350px;
        background: #63B8FF;
    }
 
    .img1 {
        width: 360px;
        height: 214px;
        background: url(http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg) no-repeat;
        margin: 68px 60px;
    }
 
    .img2 {
        width: 360px;
        height: 214px;
        background: url(http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg) no-repeat;
        margin: 68px 60px;
    }
 
    .top div {
        display: inline-block;
    }
 
    .bottom {
        width: 900px;
        height: 250px;
        background: #CD919E;
    }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="top">
            <div class="img1">
            </div>
            <div class="img2"></div>
        </div>
        <div class="bottom">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>
 
</html>

拍拍你的头 2019-06-12

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

0

收起

2回答

好帮手慕言 2019-06-13 13:45:20

同学你好，只有上下margin会重叠，左右方向的不会哦，

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

好帮手慕言 2019-06-13 11:06:35

同学你好，因为设置了display: inline-block;解决了margin上下重叠的问题。

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

提问者拍拍你的头 #1

在同一行了为什么左右的margin没有重叠呢？

2019-06-13 11:15:40

相似问题

请问，为什么元素与元素之间的margin外边距是20px，而不是10px？

老师使用float浮动后那么他的外间距是和哪个元素的？还是和浮动前一样吗？

在设置外边距的时候，什么时候是合并的？

老师能否把这几种BFC常见形成条件举个应用的例子呢？这里的例子不太明白啊

老师，我的外边距没有合并，按理来说两个div的距离不应该是10px么？但是我的是20px，为什么呀

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号