背景画像とブラウザの間に隙間

初めまして。
プログラミング初心者です。

背景画像をブラウザいっぱいに表示させたいのですが、
どうしても背景画像とブラウザの間に隙間が出来てしまいます。

background-size:cover;や、自分でサイトで調べてみて、
imageをブロック化、 vertical-align: bottom;
も試しましたが、隙間が出来てしまいます。
どうすればいいのかご教示いただきたいです。
初歩的な質問ですみません。

【追記】
自分で調べてみて、
body部にmargin:0;を書いたら、余白はなくなりました。
.top-wrapper部のbackground-size: cover;だけでは
どうしてだめなのでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <link rel="stylesheet" href="style.sheet/style.css">
9</head>
10<body>
11<div class="top-wrapper">
12  <div class="container">
13  <header>
14      <div class="header-left">
15        PAS-POL
16      </div>
17      <div class="header-right">
18      <ul>
19        <li>TOP</li>
20        <li>PRODUCT</li>
21        <li>ABOUT</li>
22        <li>NEWS</li>
23        <li>CONTACT</li>    
24      </ul>
25    </div>
26    </header>     
27    </div> 
28</div>

css
1body{
2  font-family: serif;
3}
4.top-wrapper{
5  background-image: url(../image/main_visual_13-0x0.jpg); 
6  background-size: cover;
7}
8

kei344

2019/12/20 14:36

書かれている状況が再現するコード（HTML/CSS）全体を質問文に追記されたほうが回答を得やすいと思います。

kmome

2019/12/20 14:38

ご丁寧にありがとうございます。編集してみます。

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

回答1件

ベストアンサー

たぶん、デフォルトスタイルシートが付けているbody要素のpaddingでは？

CSS
1body {
2   margin: 0;
3   padding: 0;
4}
5```**動くサンプル：**[https://jsfiddle.net/hpw0tsrn/](https://jsfiddle.net/hpw0tsrn/)
6
7---
8
9
10【ウェブページ周囲の余白サイズや背景色を調整する方法 [ホームページ作成] All About】
11[https://allabout.co.jp/gm/gc/23796/](https://allabout.co.jp/gm/gc/23796/)
12
13【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
14[https://nandemo-nobiru.com/2944/](https://nandemo-nobiru.com/2944/)