airbnb模写(ヘッダーとメインコンテンツ間の空白に関して)

airbnbのサイトを模写しているのですが、本系サイトを見るとヘッダーとメインコンテンツ間に謎のスペース(ボーダー)があります。
本家サイトのソースを確認し、私が実装してもそのスペース(ボーダー)がどこで設定されているか把握できませんでした。
どこで設定されているのかを教えていただきたいです。

1枚目が本家ページの画像です。
※拡大していただくとわかりやすいです。
https://www.airbnb.jp/gift

2枚目が自分で作ったページの画像です。

zushi0905

2019/09/13 01:23

自分のcssとhtmlを載せてください。写真だけでは違いが判断できません。

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

回答1件

ベストアンサー

とりあえず本家のサイトからさっくり見てみました。
以下cssが対象ではないかと思われます。
確認時に見やすい様にするため以下2つの要素は削除した方が変化がわかりやすいかと。

確認時削除するとわかりやすい

html
1<div class="hero-image-picture" style="background-image: url(&quot;https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg&quot;);"></div>
2
3<div class="dark-cover"></div>
4

原因

html
1<div class="_19trzwd"></div>

css
1._19trzwd {
2    background: #ffffff !important;
3    box-shadow: 0 1px 0 #EBEBEB !important;  // こいつを0にすると消えるのではないかと。
4    -webkit-transition-duration: 200ms !important;
5    transition-duration: 200ms !important;
6    -webkit-transition-property: background, box-shadow !important;
7    -moz-transition-property: background, box-shadow !important;
8    transition-property: background, box-shadow !important;
9    -webkit-transition-timing-function: ease-out !important;
10    transition-timing-function: ease-out !important;
11    width: 100% !important;
12}