css中margin一种 边距的折叠(Collapsing Margins)
当两个垂直相邻的块级元素的边距相遇时，它们会折叠成一个边距，其大小为两者中较大的那个。这是CSS的一个特性，旨在避免不必要的空白。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style type="text/css"> 7 .box1 {margin-bottom: 20px;width:200px;aspect-ratio:1;background-color:red;} 8 .box2 {margin-top: 30px;width:200px;height:200px;background-color:green;} 9 </style> 10 </head> 11 <body> 12 <div class="box1">box1</div> 13 <div class="box2">box2</div> 14 </body> 15 </html>
在上述例子中，.box1和.box2之间的实际边距将是30px，而不是两者之和50px。
浙公网安备 33010602011771号