webサイト 模写 ヘッダー画像

Question

リンク内容

リンク内容のヘッダー部分について

Google ChromeのComputedではheightが798pxであるのに対して、
出力では添付画像のように750pxになっているのはどうしてでしょうか？

@charset "UTF-8";
/* CSS Document */

body{
	height:100%;
	margin: 0;
	padding:0;
	font-family: "Noto Sans JP", sans-serif;
	
	
}
.header {
	background: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg);
    background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
    height: 100vh;
    min-height: 660px;
    text-align: center;
    position: relative;
    padding-top: 48px;
	color: #ffffff;
}

.logo{
	margin-top: 17vh;
    margin-right: auto;
    margin-bottom: 35px;
    margin-left: auto;
	width:131px;
	height:116px;
	background:url("Flower/download.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
}

.tagline{
	
	font-size:25px;
	margin-bottom: 62vh;
	
}

.footnote{
	font-size: 16px;
}

.footnote p{
	margin:5px
}

@charset "UTF-8";
/* CSS Document */

body{
	height:100%;
	margin: 0;
	padding:0;
	font-family: "Noto Sans JP", sans-serif;
	
	
}
.header {
	background: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg);
    background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
    height: 100vh;
    min-height: 660px;
    text-align: center;
    position: relative;
    padding-top: 48px;
	color: #ffffff;
}

.logo{
	margin-top: 17vh;
    margin-right: auto;
    margin-bottom: 35px;
    margin-left: auto;
	width:131px;
	height:116px;
	background:url("Flower/download.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
}

.tagline{
	
	font-size:25px;
	margin-bottom: 62vh;
	
}

.footnote{
	font-size: 16px;
}

.footnote p{
	margin:5px
}

Comments

[m.ts10806]

どこにも「750px」になっているところはないように見受けられます。
いずれにしてもコードは画像ではなくテキストベースで、マークダウンを利用してご提示ください。他者がコピペで現象確認できるように

[sheepshonn]

自分が書いたコードを追加しました。
クロームの要素を示す図形が750pxになっています。

Answer 1

画像750px + paddingTop 48pxでは？

Comments

[kyoya0819]

というより高さ指定がvhなので環境によって変わりますけどね

[sheepshonn]

すみません、私の質問がおかしかったです。
お手本通りに100vhとして出力したのですが、ヘッダー部分がお手本に比べて大きなってしまったのはどうしてでしょうか？

[kyoya0819]

まずvhについてですが画面の表示領域（場合によってはブラウザ上部のタグも含む）を100vhとしたときの割合で表します。

例えば高さ1080pxの表示領域だったら100vhは1080px、10vhは108pxになります。

[sheepshonn]

ご丁寧にありがとうございます。
グーグルで開いてみると、お手本に比べてヘッダーが長くなっているのはどうしてでしょうか？

[kyoya0819]

100vh=750px

paddingTop=48px

height+padding=798px
750px+48px=798px

長くなっているとありますが同じ端末で見ましたか？同じウィンドウサイズで見ましたか？

Answer 2

どこかでその要素に対して

box-sizing: border-box;

というプロパティが設定されていませんか？
box-sizingでググッていただけるとわかると思いますが、
このプロパティをつけると、高さ指定をpaddingも含めて解釈するようになります。

Comments

[sheepshonn]

解決できました。
ありがとうございます