質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

836閲覧

line-height: 1;と指定してもfont-sizeと揃わない

sigeru

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2021/05/24 13:15

編集2021/05/24 14:56

前提・実現したいこと

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 Pゴシック", "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/ツールのバージョンなど)

追記
すみません、ここの表示のことです。

ここにより詳細な情報を記載してください。

Lhankor_Mhy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

itagagaki

2021/05/24 14:22

質問に載せている表示では18pxになっているようですが…? 17.6pxという表示はどこにあるのですか?
sigeru

2021/05/24 14:57

すみません。補足情報にスクリーンショットを追記しました
itagagaki

2021/05/24 15:33

ああ、なるほど、意味がわかりました。 <div style="display: block; width: 18px; height: 18px;"></div> でも 18 × 18 にはならず、17.986 × 17.986 って表示されますね。 私もこれはもやっとしていましたが、そういうものだと思っていました。 私は回答できません。すみません。
takna

2021/05/24 22:56

報告:Mac Firefox/Chrome だと高さ18pxとなりました
int32_t

2021/05/24 23:41

Windowsをお使いでしょうか? 「ディプレイ」設定の「拡大縮小とレイアウト」「テキスト、アプリ、その他の項目のサイズを変更する」の値はどうなっていますか?
Lhankor_Mhy

2021/05/25 10:15

Win 10 ですが、Firefox と Chrome で 18pxになりました。
guest

回答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
int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sigeru

2021/05/25 14:46

完璧な答えありがとうございます。助かりました。
guest

0

「ディプレイ」設定の「拡大縮小とレイアウト」「テキスト、アプリ、その他の項目のサイズを変更する」の値を125%から100%に変更したら解決しました。コメントくださった方々ありがとうございました。

投稿2021/05/25 10:34

sigeru

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問