margin 怎么是相加的?

margin 怎么是相加的?

<!DOCTYPE html>

<html>

<head>

        <!-- 此处编写样式 -->

        <title>浮动的应用</title>

        <meta charset="utf-8" />

        <style>

            *{margin:0;padding:0;}

            .big_box{width:790px;border:1px dashed #cfcfcf;padding:10px;overflow:hidden;}

            span{display:block;}

            .box{float:left;margin:10px;border:1px solid #cfcfcf;}

    

        </style>

</head>

<body>   

        <!-- 此处写代码 --> 

        <div class="big_box">

            <div class="box">

                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="image" />

                <span>欢迎来到慕课网学习新知识 !</span>

            </div>

            <div class="box">

                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="image" />

                 <span>欢迎来到慕课网学习新知识 !</span>

            </div>

            <div class="box">

                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="image" />

                 <span>欢迎来到慕课网学习新知识 !</span>

            </div>

            <div class="box">

                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="image" />

                <span>欢迎来到慕课网学习新知识 !</span>

            </div>

            <div class="box">

                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="image" />

                 <span>欢迎来到慕课网学习新知识 !</span>

            </div>

            <div class="box">

                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="image" />

                <span>欢迎来到慕课网学习新知识</span>

            </div>

            

        </div>

</body>

</html>

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

正在回答

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

1回答

你好同学:

请尽量清晰完善地描述问题,以便大家给予专业的回复。

在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠,因为.box设置了浮动,所以垂直margin没有发生重叠现象.

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

祝学习愉快!

  • 慕码渣 提问者 #1
    元素浮动之后,margin将会不重叠?
    2018-11-12 14:51:00
  • 慕码渣 提问者 #2
    即使清除浮动也是不重叠?
    2018-11-12 14:52:09
  • 妮可妮可妮_ 回复 提问者 慕码渣 #3
    是的,只是清楚了浮动带来的影响,元素还是浮动的,只有在在规范文档中,2个或以上的块级盒模型相邻的垂直margin才会重叠
    2018-11-12 15:50:15
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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