效果如图：
两块代码html、css完全相同，但不知道为什么第一部分会多一块空白区域（即第一个箭头所指向的位置）。这个神奇的问题从昨天晚上就一直困扰着我，虽然直接删掉就可以解决，但是编码第一次遇到这么神奇的问题还是想探究一下。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.footer {
width: 800px;
height: 100px;
background: #ed817e;
}
.header {
width:800px;
height: 50px;
background: #5880f9;
}
</style>
</head>
<body>
<div>
<div class="header">这是页面头部</div>
<div class="footer">这是页面底部</div>
</div>
<hr/>
<div>
<div class="header">头部</div>
<div class="footer">底部</div>
</div>
<!--
<div>
<div class="header">这是页面头部</div>
<div class="footer">这是页面底部</div>
</div>
-->
</body>
</html>
橋本奈奈未
慕的地6079101
Mk丶
努力奔跑的自己
慕虎9441190