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>
原文地址：https://www.cnblogs.com/yuanxiangguang/p/11317003.html
时间： 2024-11-25 05:51:44