margin,paddingすると下の要素にも空白がついてしまう

背景画像の上に四角、四角の上に文字という構図にしたいのですが文字の入ってる四角にpaddingやmarginをつけようとすると後ろの背景画像にも空白がついてしまいます。
absoluteなども試しましたが窓の大きさを変えるとおかしくなってしまうため出来れば違う方法があるならご教授いただきたいです。

HTML
1<!DOCTYPE html>
2<html>
3 <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6</head>
7<body>
8<div class="top-container">
9    <div class="catch-copy">
10     <h1>aaaaaaa<br>aaaaaaaaaa</h1>
11     <h1 id="price">1000000円</h1>
12     <button>お問い合わせはこちらから<i class="fas fa-angle-double-right fa-position-left"></i></button>
13     <h2>090-000000000</h2>
14    </div>
15  </div>
16</body>
17</html>

CSS
1.top-container{
2    background-image:url("3880301_m.jpg");
3    height:730px;
4    background-position:50% 10%
5}
6
7.catch-copy{
8  height:200px;
9  margin:20px;
10  width:550px;
11  color:black;
12}
13
14.catch-copy h1{
15    font-size:70px;
16    background-color:white;
17    color:#88e0d5;
18}
19
20#price{
21    color:#ff7b3d;
22    font-weight:10px;
23}
24
25button{
26    font-size:30px;
27    color:white;
28    padding:20px;
29    border-radius:15px;
30    width:500px;
31    height:100px;
32    background-color:rgb(199, 223, 114);
33    box-shadow:0px 7px 2px rgb(58, 104, 44);
34    border: none;
35}
36
37.catch-copy h2{
38    font-size:80px;
39    font-weight:10px;
40    font-family:cursive;
41}

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

親子間のマージンの相殺が原因です。
色々な解決方法がありますが、たとえば、ブロック整形コンテキストを持たせると解決すると思います。

css
1.top-container{
2    display: flow-root;
3}

参考：

あるブロックの margin-top と、1つ以上の子孫ブロックの margin-top を隔てる境界、パディング、インライン部分、ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの margin-bottom と1つ以上の子孫ブロックの margin-bottom を隔て境界、パディング、インラインコンテンツ、 height, min-height, max-height のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN