Q&A
質問に載せている表示では18pxになっているようですが…？
17.6pxという表示はどこにあるのですか？
前提・実現したいこと
font-size: 18px;
line-height: 1;
と指定し、chromeのデベロッパーツールで高さを確認すると、17.6pxになっています。
原因は何が考えられますか?
発生している問題・エラーメッセージ
該当のソースコード
デベロッパーツールの表示です。
.form__label {
display: block;
font-family: "游ゴシック Medium", "游ゴシック体 Medium", "Yu Gothic Medium", YuGothic Medium, sans-serif;
font-size: 18px;
line-height: 1;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
background: transparent;
}
*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
label {
cursor: default;
}
body {
line-height: 1;
}
body {
font-family: 'Lato', "游ゴシック Medium", "游ゴシック体 Medium", "Yu Gothic Medium", "YuGothic Medium", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 18px;
color: #505050;
}
*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
試したこと
色々試しましたが解決できません。
補足情報（FW/ツールのバージョンなど）
追記
すみません、ここの表示のことです。
すみません。補足情報にスクリーンショットを追記しました
ああ、なるほど、意味がわかりました。
<div style="display: block; width: 18px; height: 18px;"></div>
でも 18 × 18 にはならず、17.986 × 17.986 って表示されますね。
私もこれはもやっとしていましたが、そういうものだと思っていました。
私は回答できません。すみません。
報告：Mac Firefox/Chrome だと高さ18pxとなりました
Windowsをお使いでしょうか? 「ディプレイ」設定の「拡大縮小とレイアウト」「テキスト、アプリ、その他の項目のサイズを変更する」の値はどうなっていますか?
Win 10 ですが、Firefox と Chrome で 18pxになりました。
回答2件
0
ベストアンサー
すでに解決済みですが、どうしてこのような結果になるか解説します。
CSS で指定された長さは、Chrome 内部では「テキスト、アプリ、その他の項目のサイズを変更する」の値を掛けて扱います。値が 125% だと 18 * 1.25 = 22.5 ですが、フォントサイズに関しては切り捨てのようで、22 ピクセルのフォントを使います。で、物理的には22ピクセルの行の高さになりますが、CSSで指定された値との整合性を取るために、offsetHeight プロパティや DevTools での表示では物理サイズを「テキスト、アプリ、その他の項目のサイズを変更する」の値で割って返します。22 / 1.25 = 17.6 になるわけです。
「テキスト、アプリ、その他の項目のサイズを変更する」の値が100%の整数倍ではないと、こういう誤差はどうしても発生してしまいます。ウェブサイトを開発する際は100%の整数倍にしておくことをお勧めします。
投稿2021/05/25 12:30
編集2021/05/25 13:09総合スコア21695
0
「ディプレイ」設定の「拡大縮小とレイアウト」「テキスト、アプリ、その他の項目のサイズを変更する」の値を１２５％から１００％に変更したら解決しました。コメントくださった方々ありがとうございました。
投稿2021/05/25 10:34
総合スコア1
あなたの回答
tips
プレビュー
