背景画像の下に隙間ができる

背景画像を設定すると、どうしても下部に隙間ができてしまいます。

発生している問題・エラーメッセージ

htmlで

    <div class="top-wrap">
    <div class="top-image"></div>  
    </div>

cssで

.top-image{
    height:100vh;
    background-size:cover;
    background-image: url(img/xx.png);
    background-position: center center;
    background-repeat: no-repeat;
    font-size: 0;
   
}

と記入しているのですが、その下に続く要素との間にどうしても隙間ができてしまいます。

*{
 margin: 0px;
 padding: 0px;     
  
}

もCSSで試してみたのですが上記の解決にはなりませんでした。
そのほかにもvertical-alignやfont-size:0;など調べる限りのことをやりましたがうまくいきません・・・・
まだコーディングを初めて日が浅く、どなたか教えていただけますと幸いです・・・・。
よろしくお願いいたします。

※追記
隙間の高さは20oxほどです。
また、ブラウザの拡大縮小は行っておりません。プレビューはchromeで行っております。

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

回答3件

提示のコードだけでは症状を再現できません。
前後の要素の設定などが影響していると思われますので、前後のHTML、CSSコードを含めて症状の再現できるものを提示してください。

いちおう、よくある原因は「マージンの相殺」ですね。

次の要素の子要素（あるいは孫要素）で margin-top を設定してませんか。

marginの相殺の理解を深めよう | Stocker.jp / diary

投稿2021/03/19 00:33

編集2021/03/19 00:47

hatena19

総合スコア34073

自己解決

解決いたしました。
hatena様のおっしゃるmarginの相殺に当てはまるかわからないのですが下の要素にpaddingが設定されておりましたためリンクを応用し、またamiya-se様のコードをコピペさせていただいたらできました！！
本当にありがとうございました。

投稿2021/03/19 01:55

denkiki

総合スコア0

追記を受けてPCのchromeで確認してみましたが、画面いっぱいの表示になりました。
他の要素があれば追記していただいたり、
キャプチャ画像を載せていただけるとヒントになるかもしれません。
変更前のCSSのキャッシュが効いているだけのような気もしますが。
「Ctrl+F5」を同時押しとかも試してみてください。

この形のコードで隙間は無くなりました。
当方の場合はbodyについていたmargin:8pxだけでしたが。

sample
1<style>
2*{
3   margin: 0px;
4   padding: 0px;
5}
6.top-image{
7    height:100vh;
8    background-size:cover;
9    background-image: url(img/xx.png);
10    background-position: center center;
11    background-repeat: no-repeat;
12    font-size: 0;
13}
14</style>
15<div class="top-wrap">
16   <div class="top-image">
17   </div>
18</div>