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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{margin:0;border:0;}
    .a1,.a2,.a3{border:1px solid;margin: 10px;width: 240px;height: 162px;float: left;}
    .big{border:1px dashed;float: left;}
  </style>
</head>
<body>
    <div class="big">
      <div class="first">
        <div class="a1">
          <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
          <br>
          欢迎来到慕课网学习新知识!
        </div>
        <div class="a2">
          <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
          <br>
          欢迎来到慕课网学习新知识!
        </div>
        <div class="a3">
          <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
          <br>
          欢迎来到慕课网学习新知识!
        </div>
      </div>
      <div class="second">
        <div class="a1">
          <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
          <br>
          欢迎来到慕课网学习新知识!
        </div>
        <div class="a2">
          <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
          <br>
          欢迎来到慕课网学习新知识!
        </div>
        <div class="a3">
          <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
          <br>
          欢迎来到慕课网学习新知识!
        </div>
      </div>
    </div>
</body>
</html>http://img1.sycdn.imooc.com//climg/5a73ff2a0001c75119200937.jpg

正在回答

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

3回答

块级元素的垂直相邻外边距会合并,但是浮动元素的外边距不会合并。

祝学习愉快!

  • qq_Toloveyousel_0 提问者 #1
    什么是垂直外边距呀。。。难道水平方向的不会合并么?
    2018-02-03 10:04:06
一路电光带火花 2018-02-03 10:37:07

垂直外边据,就是元素的上下边距,块级元素都是独占一行的,怎么合并外边据。。。。你测试一下效果就知道了。

bbbboom 2018-02-02 14:55:03

你的代码中a1,a2,a3的样式都是margin:10px;  这样写是上右下左四个边的外边距都是10px,所以每两个div之间的距离就是20px啊!

  • 提问者 qq_Toloveyousel_0 #1
    ???怎么会! 外边距不是会合并么?
    2018-02-02 22:32:49
  • 提问者 qq_Toloveyousel_0 #2
    谢谢你认真看我代码啦(●'◡'●)ノ❤
    2018-02-03 10:04:48
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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