其他分享
首页 > 其他分享> > 第二十二节 margin合并

第二十二节 margin合并

作者:互联网

 1 <!-- 外边距合并:当两个垂直外边距相遇时,他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大值。解决方案如下:
 2     1、使用这种特性
 3     2、设置一边的外边距,一般设置margin-top
 4     3、将元素浮动或者定位 -->
 5 
 6 <!DOCTYPE html>
 7 <html lang="en">
 8 <head>
 9     <meta charset="UTF-8">
10     <title>Document</title>
11     <style type="text/css">
12         
13         .box1,.box2{
14             width:200px;
15             height:200px;
16             background-color: gold;
17         }
18         
19         .box1{
20             margin-bottom:20px;
21         }
22         
23         .box2{
24             margin-top:10px;  /* 此时两个盒子的间距等于较大的20px */
25         }
26 
27     </style>
28 </head>
29 <body>
30     <div class="box1"></div>
31     <div class="box2"></div>
32 </body>
33 </html>

 

标签:第二十二,gold,margin,合并,20px,box2,box1,200px
来源: https://www.cnblogs.com/kogmaw/p/12420645.html