当前位置：网站首页>The collapse of margin

The collapse of margin

2022-07-24 18:08:00 【Jiojio is learning le】

demo: A parent box is nested with a child box , Sub box margin-top Collapse caused by .

6 Methods :

1. Add to parent box border

2. Add to parent box padding-top

3. Add to parent box overflow:hidden

4. Parent box :position:fixed

5. Parent box :display:table

6. Add a sibling to the front of the child element

The attribute is :content:"";

overflow:hidden;

 [html]  view plaincopy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
    body {  
        margin: 0;  
        padding: 0;  
    }  
       .parent {  
        width: 400px;  
        height: 400px;  
        background-color: red;  
        margin: 0 auto;  
       }  
       .son {  
        width: 200px;  
        height: 200px;  
        background-color: green;  
        margin: 0 auto;  
        margin-top: 100px;  
       }  
    </style>  
</head>  
<body>  
    <div class="parent">  
        <div class="son"></div>  
    </div>  
</body>  
</html>  