個人のブログ用に罫線入り用紙の効果を作成しようとしていますが、紙の実際の線の1つに各線をレンダリングする際に問題が発生しました。すべてが適切に開始されますが、行がページを下るにつれて丸め誤差が累積するように見えました。行の高さを24pxに設定し、24pxの要素にパディングを追加しました。基本的には、すべての行が正しくレンダリングされるように、高さを追加するものが24の倍数であることを確認しようとしました。しかし、クロムは線の高さのプロパティを正確に尊重していないことがわかりました。以下のスクリーンショットを誰かが説明できますか?
これが基本的に私が目指している効果です。ご覧のとおり、かなり近いです。
しかし、heightプロパティを見ると、実際には72(24 * 3)であるはずの70.909...です。基本的に私の質問は、<p>
[6char]の高さが行の高さの倍数ではないのはなぜですか?
<p>
テキスト内の要素のCSS計算スタイルは次のとおりです。
font-size:16.363px;
height:70.909088;
line-height: 24px;
padding-top: 24px;
margin:0px;
padding-bottom:0px;