HTML　画像が切れる　プロゲート道場中級

HTMLの質問です。（プロゲート道場中級）
分かりやすくなるようにbackground-colorをつけて1枚目の画像のように書いていました。
できたと思って不要な文字（a）を消したら背景も含めて像が切れました。この状況からやり直せる方法と、こうなった原因があれば教えて下さい。。。

aを消す前↓

aを消したら↓

html
1<body>
2  <!-- ここにコードを書いていきましょう -->
3  <div class="top-wrapper">
4    <div class="top-container">a <!--　←これを消すとおかしくなりました。。。 -->
5        <div class="top-message">
6          <h1>LEARN TO CODE.</h1>
7          <h1>LEARN TO BE CREATIVE.</h1>
8          <p>Progateはオンラインプログラミング学習サービスです。</p>
9          <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
10        </div>
11        <div class="btn-wrapper">btn-wrapper
12          
13        </div>
14    </div>
15  </div>
16  
17</body>

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/* ここからCSSを書いていきましょう */
22.top-wrapper{
23  background-color:aqua;
24  background-image:url(https://prog-8.com/images/html/advanced/top.png);
25  background-size:cover;
26  height:600px;
27}
28.top-container{
29  background-color:blue;
30  width:1170px;
31  height:600px;
32  margin:0 auto; 
33}
34.top-message{
35  background-color:red;
36  margin-top:180px;
37  margin-bottom:30px;
38  text-align:center;
39  color:white;
40  opacity:0.7;
41}
42
43h1{
44  font-size:45px;
45  letter-spacing:5px;
46}
47
48.btn-wrapper{
49  background-color:yellow;
50  
51}

m.ts10806

2021/02/23 06:26

前の質問と同件でしょうか。質問は編集できるので、わざわざ立て直す必要はありません。

m.ts10806

2021/02/23 06:26

あ、ごめんなさい。写真ですね。失礼。

AlsaKolpiiya

2021/02/23 06:31 編集

今日初めてteratailに登録、質問しました。親切にありがとうございます(^^)！前の質問は削除依頼致しました。

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

回答2件

ベストアンサー

原因はマージンの相殺というものですね。

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

.top-message の margin-top: 180px; が親要素を乗り越えてはみ出しています。
親要素とのあいだに何かあると相殺されないのではみ出しません。
aがある場合もそうです。
他にはパディング、境界線を設定するとか、overflow: hidden;を設定することでも解消できます。

css
1.top-container{
2  overflow: hidden;
3/* padding-top: 1px; */
4/*  border-top: 1px solid transparent; */
5}

投稿2021/02/23 07:19

編集2021/02/23 07:33

hatena19

総合スコア33699

AlsaKolpiiya

2021/02/23 07:35 編集

本当ですね！試しに親要素（top-wrapper）からpadding-top:180px;で位置を指定してみると画像が切れることが無くなりました！有難うございました！何卒今後とも宜しくお願い致します。。。追記：overflow: hidden;も試して成功してます！

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

HTMLで余分な文字列を<div>で囲んでclearというクラス名をつけ
CSSで.clear｛opacity:0;｝としました。まぁ消えましたが、、、
美しくないですね。
このレベルで強引に問題解決していても、基本が分かっていない事で後悔に繋がる気がします。
引き続き対策、原因を教えていただけると助かります。

投稿2021/02/23 06:42

AlsaKolpiiya

総合スコア9