元素外边距溢出(塌陷)
想要达到这样的效果:
如果是实现这样的源代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>demo</title>
- <style type="text/css">
- .big{
- height:300px;
- width:500px;
- background:#EEEEEE;
- }
- .small{
- height:100px;
- width:100px;
- background:red;
- margin-top:50px;
- }
- </style>
- </head>
- <body>
- <div class="big">
- <div class="small">
- </div>
- </div>
- </body>
- </html>
会出现这样的效果:
加了margin设置导致了溢出问题。解决方式有两个:
①.给div加边框border;
- .big{
- height:300px;
- width:500px;
- background:#EEEEEE;
- border:1px solid black;
- }
效果:
②.使用overflow:hidden;隐藏溢出
- .big{
- height:300px;
- width:500px;
- background:#EEEEEE;
- overflow:hidden;
- }
效果: