ｐタグ内の文字の上下の余白が消えない・・・

Question

pタグで書いた文字の周りの余白について質問させてください。
pタグ内の文字の上下の余白を消すために、line-height:100%を指定したのですが、
文字の下の余白が残ってしまいます。（画像参照）

文字の下の余白は何によるものでしょうか？
（上の余白はline-heightの設定で消えるのですが・・・）

設定しているのは下記コードのみです。
html=====================================

<p class="pattern3">見出しパターン３</p> CSS====================================== *{ margin: 0; padding: 0; } .pattern3 { line-height: 100%; font-size: 24px; color: black; border: 1px solid khaki; }=========================================

初歩的な質問ですが、よろしくお願いいたします。

Answer 1

専門知識はないので、詳しい解説はできないのですが、
j, p, q, y
などの文字であれば下枠いっぱいまで描画されると思います。

いわゆるベースラインをはみ出す文字のために、フォント自体に余白がとってあるのではないでしょうか。
https://wa3.i-3-i.info/word15172.html

Comments

[KazuSaka]

ご回答ありがとうございます。
下の余白はフォント自体が持っている余白なんですね。
疑問解消できました。

Answer 2

borderをいじればどうにかなりませんか？

Comments

[KazuSaka]

ご回答ありがとうございます。
borderはpタグの範囲を可視化するためにつけてるつもりです。
説明が不足しており、すいません。