Q&A
質問文の画像にあるような現象が CodePen 上では再現できませんでした( https://codepen.io/anon/pen/EJgrqg )。
使用しているフォントや OS, ブラウザなどの情報を質問文に追記していただけませんか？
div要素を画面の半分の高さ50vhに指定して、フォントサイズを同じく50vhに指定しました。
しかし、以下の画像のようにはみ出てしまいます。何が間違っているのでしょうか？
html
1<html style="font-size:62.5%;"> 2 <body> 3 <div style="height:100vh;"> 4 <div style="height:50vh;font-size:50vh;"> 5 Hello 6 </div> 7 </div> 8 </body> 9</html>
実行環境
High Sierra 10.13.x
Google Chrome
回答2件
0
line-heightの問題もありますが、
そもそもフォントはfont-sizeの中に収まるものではありません。
分かりやすい例を示します。
html
1<div style="font-family:'メイリオ'; height:100px; font-size:100px; line-height:1; background-color:wheat">ÅǺyg漢</div> 2<br> 3<div style="font-family:'Times New Roman'; height:100px; font-size:100px; line-height:1; background-color:wheat">ÅǺyg</div>
上に記号が付くと大幅にはみ出し、そうでなくともyやgのディセンダ(下に伸びる部分)や漢字はややはみ出すのはよくあることです。
投稿2019/04/08 12:03
総合スコア3047
0
line-heightが1を超えているためと思われます。
投稿2019/04/08 09:42
総合スコア145184
line-heightの記述は見当たりませんでした。
何が原因でline-heightが超えているのでしょうか？
ズレかたもなんか変ですしCodePenではうまく表示されています。
CodePen上でも発生していました。
line-height:1;を指定すれば確かに治ります。でも発生する理由がわかりません。
どのような要素によって引き起こされているのでしょうか？
横からですが...
> line-height:1;を指定すれば確かに治ります。でも発生する理由がわかりません。
line-height ( https://developer.mozilla.org/ja/docs/Web/CSS/line-height ) を参照しましょう。
> 初期値 normal
> normal
> ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。
と書かれています。
Chromeは1.0と書いているのを見ました。
Chromeも本当に1.2でしょうか？
そもそもフォントに依存する値なので、フォントを示さずに1.0か1.2かという議論に意味は無いですね。
確認してみたところ、メイリオとTimes New RomanではWindows10上のFirefox, Chrome, IE, Edgeで同じ行送り幅になりました。
MSPゴシックはなぜかFirefoxでだけ広いです。
あなたの回答
tips
プレビュー
