airbnb　吹き出しの余白について

ヘッダーにございます「airbnbホストになって、暮らしをレベルアップ」の吹き出し部分７行について、
私が作成した際に、なぜか上下に余白ができてしまいました。
（「Airbnbホストになって、暮らしをレベルアップ」の上部分、「はじめる」の下部分）

cssにてformタグにpadding-top:0を調整してみましたが、どうしてもこの余白が消えません。
見本の形と近づけるにはどうすれば良いでしょうか。

html
1<!doctype html>
2<html lang="ja">
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7  <!-- Bootstrap CSS -->
8  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
9  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10  <link rel="stylesheet" href="index.css">
11  <script src="https://kit.fontawesome.com/fb63ee4e0c.js" crossorigin="anonymous"></script>
12  <title>SAMPLELP</title>
13</head>
14<body>
15  <header class="header">
16    <div class="header-cover">
17      <nav class="navbar navbar-expand-lg bg-white fixed-top">
18        <a class="navbar-brand" href="#"><i class="fab fa-airbnb fa-2x"></i></a>
19        <div class="collapse navbar-collapse" id="navbarNav">
20          <ul class="navbar-nav mr-auto">
21            <li class="nav-item active">
22              <a class="nav-link" href="#">基本情報</a>
23            </li>
24            <li class="nav-item">
25              <a class="nav-link" href="#">準備</a>
26            </li>
27            <li class="nav-item">
28              <a class="nav-link" href="#">安全対策</a>
29            </li>
30            <li class="nav-item">
31              <a class="nav-link disabled" href="#">マネープラン</a>
32            </li>
33          </ul>
34          <span class="navbar-text mr-3">月収予想</span>
35          <span class="navbar-text mr-3 font-weight-bold">¥ 145,228</span>
36          <form action="form-inline">
37            <button class="btn btn-danger" type="button" name="button">はじめる</button>
38          </form>
39        </div>
40      </nav>
41      <div class="container d-md-block d-none">
42        <div class="bg-white p-4 border-light header-form">
43      　  <form>
44        　  <div class="form-group">
45              <div class="h1">Airbnbホストになって、暮らしをレベルアップ</div>
46        　    <label for="formGroupExampleInput">どれくらいの収入が見込めるのかチェック</label>
47        　    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="大阪">
48        　  </div>
49            <form>
50              <div class="form-row">
51                <div class="col">
52                  <select type="text" class="form-control">
53                    <option value="">まるまる貸し切り</option>
54                    <option value="">個室</option>
55                    <option value="">シェアルーム</option>
56                  </select>
57                </div>
58                <div class="col">
59                  <select type="text" class="form-control">
60                    <option value="">ゲスト１人</option>
61                    <option value="">ゲスト２人</option>
62                    <option value="">ゲスト３人</option>
63                  </select>
64                </div>
65              </div>
66              <p><span class="font-weight-bold h2">¥ 145,228月</span>月あたり</p>
67              <button class="btn btn-danger w-100 type="button" name="buttom">はじめる</button>
68            </form>
69          </form>
70        </div>
71      </div>
72    </div>
73  </header>
74  <div class="temp">
75
76  </div>
77
78
79
80  <!-- Optional JavaScript -->
81  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
82  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
83    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
84    crossorigin="anonymous"></script>
85  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
86    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
87    crossorigin="anonymous"></script>
88  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
89    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
90    crossorigin="anonymous"></script>
91</body>
92
93</html>

css
1.nav-link {
2    color: #333333;
3    padding: 25px 0;
4}
5
6.active a,
7.navbar-brand,
8.navbar-brand:hover {
9    color: #008489;
10}
11
12.avtive a {
13    border-bottom: 2px solid #008489;
14}
15
16.header-cover {
17    background: url(images/1ad4d764-38a6-464b-8fdd-b0f3339adf2f.jpg);
18    background-size: cover;
19    width: 100%;
20    height: 750px;
21    position: relative;
22}
23
24.header-form {
25    position: absolute;
26    top: 160px;
27    right: 80px;
28    width: 480px;
29    height: 480px;
30    border-radius: 10px;
31}
32
33.h1
34
35.temp {
36    height: 1000px;
37}

m.ts10806

2020/05/06 06:03

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

runban

2020/05/06 07:13

ご回答ありがとうございます。承知いたしました、ご参考にさせていただきます。

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

回答1件

ベストアンサー

余白ではなく、position: absolute; で位置を設定しているので、その上位置(top: 160px;)をお好みで変更すれば上の余白は調整できます。

下の余白は、ヘッダー(.header-cover)で高さをheight: 750px; と固定値で設定してますので、これをお好みで小さくすれば下の余白も調整できます。

模写先に近づけるなら下記のような感じでしょうか。

css
1.header-cover {
2background: url(images/1ad4d764-38a6-464b-8fdd-b0f3339adf2f.jpg);
3background-size: cover;
4width: 100%;
5height: 600px; /*修正*/
6position: relative;
7}
8
9.header-form {
10  background-color: #fff; /*追加*/
11  padding: 30px; /*追加*/
12  position: absolute;
13  top: 80px;  /*修正*/
14  right: 80px;
15  width: 460px;  /*修正*/
16  height: 460px;  /*修正*/
17  border-radius: 10px;
18  box-sizing: border-box; /*追加*/
19}

投稿2020/05/06 05:17

hatena19

総合スコア34084

runban

2020/05/06 07:13

ご回答ありがとうございます。申し訳ございません、吹き出し外の余白ではなく、吹き出し内の余白を調節したいと思い、ご質問させていただいておりました。私の質問文が言葉足らずだったことについて、お詫びいたします。恐縮ですが、吹き出し外の余白調節についてご教示いただけませんでしょうか。お手数おかけいたしますが、何卒よろしくお願いいたします。