画面上にスペースができて詰まらない

Webサイトの作成の練習をしており
homeクラスの背景画像を画面一番上から空白がないように詰めたいのですが
少し空白ができて詰めることができません。

Chromeでデフォルトで設定されている空白が問題かと思ったのですが
CSSでpaddingとmarginを消しても改善されませんでした。
何が原因でスペースができてしまうのでしょうか？

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    <title>Document</title>
7
8    <!-- style.css-->
9    <link rel="stylesheet" type="text/css" href="css/style.css">
10
11    <!-- Bootstrap-->
12    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
13    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css" rel="stylesheet">
14</head>
15<body>
16    <!-- Navigation -->
17    <nav class = "navbar navbar-expand-md">
18        <div class="container-fluid">
19            <span class="navbar-brand">
20                <h3>テスト</h3>
21            </span>
22            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
23                <span class="navbar-toggler-icon"></span>
24            </button>
25            <div class="collapse navbar-collapse" id="navbarResponsive">
26                <ul class="navbar-nav ml-auto">
27                    <li class="nav-item active">
28                        <a class="nav-link" href="#">Home</a>
29                    </li>
30                    <li class="nav-item">
31                        <a class="nav-link" href="#">About</a>
32                    </li>
33                    <li class="nav-item">
34                        <a class="nav-link" href="#">Service</a>
35                    </li>
36                    <li class="nav-item">
37                        <a class="nav-link" href="#">Team</a>
38                    </li>
39                    <li class="nav-item">
40                        <a class="nav-link" href="#">Connect</a>
41                    </li>
42                </ul>
43            </div>
44        </div>
45    </nav>
46
47    <!-- Home Section-->
48    <div class="container-fluid home">
49        <div class="row">
50            <div class="col-12 home-title">
51                <h4 class="title">キャッチコピー</h4>
52            </div>
53        </div>
54    </div>
55    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
56    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
57</body>
58</html>

CSS
1*{
2    padding:0px;
3    margin:0px;
4}
5/*-- Navigation Start--*/
6ul {
7    list-style: none;
8}
9
10nav {
11    /*background-color: #392B26 !important;*/
12    color: black;
13    z-index:1;
14    padding: 0px;
15    margin-top:0px;
16}
17
18/*Home Section*/
19.home {
20    position: fixed; 
21    top:0;
22    height:1000px;
23    background-image: url(../images/home.jpg);
24}
25
26.row {
27    width:100%;
28    text-align:center;
29}
30.title {
31    margin-top:300px;
32}

hoshi-takanori

2020/03/14 12:58

bootflat は bootstrap 3.3.0 ベースなのに bootstrap 4.3.1 と組み合わせて使っているからでは？ http://bootflat.github.io/

YOHEI_

2020/03/14 13:06

回答ありがとうございます。 bootflatをコメントアウトして再表示して見たのですがスペースが詰まりませんでした。

hoshi-takanori

2020/03/14 13:11

あれ？こちらで bootflat を消して試したら詰まりましたけど…。

YOHEI_

2020/03/14 14:02

すみません。今もしかしてと思って確認したら画像を無料ツールを使ってリサイズした際に縦横比を保つために画像自体に空白が出来ていました... ご回答ありがとうございました！

退会済みユーザー

2020/03/18 10:54

.title { margin-top:300px; } は詰まるわけないよね

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

回答1件

まず、CSSの1番上には@charsetをつけた方がいいと思います。

homeクラスというのはcontainer-fluid homeのことでしょうか？
だとすると、.container-fluid homeのCSSにbackground-imageを設定すると表示されるかと思います。
もしサイト全体の背景に画像を表示したいという場合は、<body>のすぐ下にクラスを作り、そのクラスに同じ設定をすれば全画面にimgが表示されるはずです。

投稿2020/03/18 10:09

編集2020/03/18 10:15