1. The parent element sets Overflow: Hidden
2. The parent originally set the border
3. In the vertical direction, use padding instead of margin
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> <style> * {margin: 0; padding: 0 } .parent{ background: green; width: 200px; height: 200px; /* overflow: hidden; */ /* border: 1px solid red; */ padding: 50px 0px; } .children{ width: 100px; height: 100px; /* margin-top: 50px; */ background: red; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>Copy the code