HTML pタグの位置とフォントサイズの関係

Question

HTML+CSSで画像に文字を合成する画面を作成しています。
pタグを利用した文字表示で、フォントサイズを変えるとpタグの要素位置がずれるという現象に悩まされています。
具体的にはフォントサイズ分だけtopの値が下にずれるという状態です。

<div id="PreviewArea">
    <div id="SettingArea">
        <img src="./img/img.jpg" alt="MainImg">
        <p id="String" draggable="true" >テキスト</p>
    </div>
</div>

#String {
    position: absolute;
    font-size: 56px;
    color: blue;
    top: 0px;
    left: 0px;
    text-align: center;
    background-color: black;
}

この場合top: 0pxの時は、56px下がったところに表示され、top: -56pxにするとdivの一番上に移動してくれます。
まだ初心者なので仕様がよくわかっていないのですが、これはhtmlの仕様なのでしょうか？
また、同じ位置でフォントサイズを変えても位置が移動しないようにする方法とかありますか？

Comments

[Lhankor_Mhy]

#String がHTMLに見当たらないようです。

Answer 1

#String→#NameStringだと思いますので、その前提で回答します。

デフォルトCSSで、マージンがem単位で設定されているため、フォントサイズに合わせて変化します。

blockquote, figure, listing, p, plaintext, pre, xmp {
  margin-block-start: 1em; margin-block-end: 1em;
}

15.3.3 Flow content | HTML Standard

解決方法ですが、お好みの量のマージンを設定すればいいかと思います。

Comments

[tokotaku]

マージンを0pxに設定したところ、うまくいきました！
ありがとうございます。