何故かピクセル数が微妙に縮小されて表示されてしまいます

Question

前提・実現したいこと

height, widthの値をそのまま正確に指定したい。

発生している問題・エラーメッセージ

HTMLとCSSの勉強としてサイトの模写を始めたのですが、不可思議な問題が起こり頭を悩ませています。１からコーディングをしています。フレームワーク、リセットCSSは使用していません。

headerに対してheightを65pxで指定したのですがピクセルを測れる定規のようなツールを使って実際に高さを測ると63pxくらいで、明らかに65pxよりも小さいです。しかし、Chromeのデベロッパーツールでは65pxとなっていました。

該当のソースコード

header {
background-color: rgba(34,49,52,0.9);
height: 65px;
width: 100%;
z-index: 10px;
position: fixed;
top: 0;
}

試したこと

65pxの色付きの正方形をヘッダーに追加してみたところ、このボックスもヘッダーにぴったり重なり63pxくらいでした。続いて100pxの色付き正方形をヘッダーに追加してみたところ、下にはみ出たボックスはちょうど100pxでした。

そして、同じページの下のほうでも同じボックスを同時に表示させて測ってみると、どちらも同じ大きさでした。すなわち、65pxと指定した場合は下のボックスも63pxになっていました。100pxと指定した場合はどちらも100pxとなっていました。

補足情報（FW/ツールのバージョンなど）

【修正】
質問をご覧いただきありがとうございます。
模写しているページのURLはこちらです。

headerの高さが、CSSではheightが65pxとされているのにも関わらずピクセル定規(medir)で測ってみると、62pxくらいになっています。

Comments

[m.ts10806]

どうやって「測った」のか知らないですが、
いずれにしてもコピペで再現できるコードを提示されないと、
何とも言えません。
https://teratail.com/help/question-tips#questionTips3-5

Answer 1

とりあえずheaderや、その親要素にdisplay: block;を指定するとか、

<header>の下の要素が2pxぶん、せり出て来てしまっていないか調べてみるとか.. ですかね。

手元では再現できなかったので、
再現できるソースコードがあれば、より詳しいフィードバックができると思います。

Answer 2

定規の目盛りの単位が1メモリ2pxだということに気づかないという初歩的なミスでした。お騒がせしてしまい申し訳ありません!