1. 程式人生 > >外邊距失效bug

外邊距失效bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #per{
            height: 200px;
            width: 200px;
            background-color: #ea2000;
            overflow: hidden;  /*在子盒子中新增外邊距會失效  直接影響父盒子的外邊距
                       這時新增這個屬性   就可以解決
解決方式 1、為父盒子新增 overflowhidden 2、為父盒子新增padding 3、為父盒子新增border*/ } #child{ height: 100px; width: 100px; background: blue; margin: 0 auto; margin-top: 50
px; } </style> <title></title> </head> <body> <div id="per"> <div id="child"></div> </div> </body> </html>