外边距合并与溢出

Posted 2021-01-26 sotired

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了外边距合并与溢出相关的知识，希望对你有一定的参考价值。

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="Generator" content="EditPlus?">
 6         <meta name="Author" content="">
 7         <meta name="Keywords" content="">
 8         <meta name="Description" content="">
 9         <title>Document</title>
10         <style type="text/css">
11             *{margin:0px; padding:0px;}
12             .box{
13                 width:200px; 
14                 height:200px;
15                 background:blue;
16                 /* padding:1px;   *//*必须有padding 或者border, .bb1中margin才能显示出边距*/
17                 border:5px solid blue; 
18                 /* margin-top:30px; */
19             }
20             .bb1{
21                 width:190px;
22                 height:190px;
23                 background:#ff00ff;
24                 margin-top:20px;     /*子级边距不直接作用于父级上边距,而是传递给父级;*/
25             }
26 
27             .box1{                   /*并别关系隔开距离的话,距离=外边距较大的那一个;可能会存在溢出,例如下边那个上外边距>上边那个下外边距时距离为下外边距.*/
28                 width:200px; 
29                 height:200px;
30                 background:#ff6666;
31                  margin-bottom:100px;  
32             }
33             .box2{
34                 width:200px; 
35                 height:200px;
36                 background:#6600cc;
37                 margin-top:60px;
38             }
39         </style>
40     </head>
41     <body>
42         <div class="box">
43             <div class="bb1"></div>
44         </div>
45 
46         <div class="box1"></div>
47         <div class="box2"></div>
48     </body>
49 </html>

以上是关于外边距合并与溢出的主要内容，如果未能解决你的问题，请参考以下文章

外边距合并现象

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示