CSSにおいて、block要素の中にblock要素を入れた場合、親要素に設定した背景画像のmarginが子要素のmarginによって変化する理由が知りたいです。

現在、ProgateでHTML,CSSの演習を行っております。

その際に、divによるブロック要素に背景画像を設定し、これを親要素として中にもう一つdiv要素(写真で赤色に表記)を入れました。

この際、親要素に特にmargin,paddingなどを設定してはいないのにも関わらず、写真1のような余白が上部、下部にできました。marginは子要素にしか設定してはいないため、予想では親要素には特に影響がなく背景画像はいっぱいに広がるであろうと思っていたのですが、意図しないmarginのようなものが親要素にもついてしまっているように感じます。

調べたこととして、親要素のpaddingを試しに1pxなどに設定したところ、写真2のように画面いっぱいに広がりました。0pxではそのままだったのに、1pxを設定しただけでこれだけ変わる理由もわかりません。

コードは以下になります。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  
8</head>
9<body>
10  <div class="top-container">
11    <div class="top">
12      <p class="catch-copy">LEARN TO CODE.</p>
13      <p class="catch-copy">LEARN TO BE CREATIVE.</p>
14      <p>Progateはオンラインプログラミング学習サービスです。</p>
15      <p>初心者にも優しいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
16      <a>新規登録はこちら</a>
17      <p>or</p>
18      <a>Facebookで登録</a>
19      <a>Twitterで登録</a>
20    </div>
21  </div>
22</body>
23</html>

CSS
1/* CSSのリセット*/
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここから*/
22.top-container{
23  background-image:url(https://prog-8.com/images/html/advanced/top.png);
24  background-size:cover;
25  background-color:red;
26  /* padding-top:1px;*/
27}
28
29.top{
30  margin:180px auto 100px auto;
31  width:1170px;
32  text-align:center;
33  background-color:red;
34}
35
36
37.top p{
38  color:white;
39  opacity:0.7;
40}
41
42.catch-copy{
43  font-size:45px;
44  font-weight:bold;
45  letter-spacing:5px;
46}