开发者社区> 问答> 正文

小练习 关于margin的问题?小练习

直接上代码,麻烦帮我看下哪里错了,为什么到box2的位置,margin就不好使的。

<style type="text/css">

#box{height: 404px;width: 404px;background-color: #fff;border: 1px dashed;}
#box1{height: 334px;width: 334px;margin:27px ; background-color: #f6f6f6;border: 8px solid #d7effe;    }
#box2{height: 300px;width: 300px;margin: 20px; background-color:#ffa0df;    }
#box3{height: 216px;width: 216px;margin:41px ; background-color: #ffa0df;border: 1px dashed #ffffff;    }
#box4{height: 208px;width: 208px;margin:3px ; background-color: #ffa0df;border: 1px dashed #ffffff;    }
#box5{height: 102px;width: 102px;margin:49px; background-color: #96ff38;border: 4px solid #fcff00;    }
</style>
<body>
<div id="box">
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

screenshot
screenshot

展开
收起
杨冬芳 2016-06-12 17:18:23 1888 0
1 条回答
写回答
取消 提交回答
  • IT从业

    这是margin边距重叠的问题
    你的#box2 和 #box3 的外边距重叠了,在#box1 #box2 #box3 之间没有border隔断,导致外边距选大的,即#box3的margin 41px起了作用,而#box2的margin-top没有起作用

    你可以把box都BFC话,添加overflow:hidden

    或者 给box2添加border予以隔断

    2019-07-17 19:34:42
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载