Reference materials: 1. [web front end] 23. Solve the problem that the margin of the internal div affects the margin of the external div_Anabel Chen's Blog-CSDN Blog
2. The influence and reason of setting margin between elements
There is the following code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
html,body{
width:100%;
height:100%;
line-height: 1;
text-align: center;
}
</style>
</head>
<body>
<div style="width:800px;margin:auto;height:1600px;background-color:#bbb;">
<div id="main" style="background-color:#f00;width:600px;height:800px;margin: 0px auto;">
<div style="background-color:#ff0;width:500px;height:600px;margin: 100px auto;">
<div style="background-color:#f0f;width:400px;height:400px;margin: 100px auto;">
第一页------------
</div>
</div>
</div>
<div id="main" style="background-color:#0f0;width:600px;height:800px;margin: 0px auto;">
<div style="background-color:#ff0;width:500px;height:600px;margin: 100px auto;">
<div style="background-color:#f0f;width:400px;height:400px;margin: 100px auto;">
第二页------------
</div>
</div>
</div>
</div>
</body>
</html>Originally thought that the following effects could be obtained by leaving blank space on the four sides:
But the result is the following: 
It feels like a super BUG, but after checking, I found out what the BFC mechanism is, and record it to avoid stepping on the pit again in the future.
See Resources for a workaround.