Photoshopのものさしツールを使い、高さを測り、CSSコードを入力しましたがサイズが合いません

Photoshopのものさしツールをしようして画像通りのヘッダーサイズのヘッダーをコーディングしたつもりなのですがサイズが合いません。

このサイトの場合は横幅がいっぱいなので幅を100%に設定をして高さを書いてある通りに設定をしたのですが下の写真のように見本より縦が短くなってしまいます。

どのようにしたらサイズを計測することで正しいピクセルを知ることができるでしょうか？
何が間違っているのでしょうか？

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>THAI-NAMA</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>

<body>
<!--headerここから-->
<header></header>
<!--headerここまで-->

<!--wrapperここから-->
<div id="wrapper">

	<!--mainimageここから-->
	<div id="mainimage"></div>
	<!--mainimageここまで-->

	<!--centerここから-->
	<div id="center"></div>
	<!--centerここまで-->

	<!--imageここから-->
	<div id="image"></div>
	<!--imageここまで-->

	<!--newsここから-->
	<div id="news"></div>
	<!--newsここまで-->

</div>
<!--wrapperここまで-->


<!--footerここから-->
<footer></footer>
<!--footerここまで-->

</body>

</html>

header {
width: 100%;
height: 55px;
background-color: pink;
}

kei344

2018/02/04 14:59

https://teratail.com/questions/112012 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、どちらかを削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input