1 <HTML lang="en"> 2 3 <head> 4 <Meta charset="UTF-8"> 5 <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> 6 <Meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <Title>盒模型--外边距合并</Title> 8 <style> 9 .big-Box {10 wIDth: 300px;11 height: 300px;12 background-color: cadetblue;13 margin-top: 120px;14 /* padding: 1px; */15 /* border: 1px solID red; */16 overflow: hIDden;17 }18 19 .small-Box {20 /*这里的margin-top:20px; 会被父盒子给合并 解决办法有三:21 01-. 给父盒子设置边框 ---> 这种方式是不可取的22 02 . 给父盒子一个内边距padding:1px; --->这种方式是不可取的23 03. 给父盒子一个overflow: hIDden;24 25 */26 margin-top: 20px;27 wIDth: 100px;28 height: 100px;29 background-color: pink;30 }31 </style>32 33 </head>34 35 <body>36 <div class="big-Box">37 <div class="small-Box"></div>38 </div>39 </body>40 41 </HTML>总结
以上是内存溢出为你收集整理的盒模型-外边距合并全部内容，希望文章能够帮你解决盒模型-外边距合并所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）