HTMLでの大文字の文字ブロックを真ん中に合わせる方法

Question

前提

WEBサイト制作をしております。

実現したいこと

デザイン通りにコーディングしているところ
大文字の文字ブロックだと下に隙間がある状態になります。
これはＨＴＭＬの仕様なのでしょうか？

該当のソースコード

<a>NEWS</a>

body{
 font-family: Arial, Helvetica, sans-serif;
}

a{
line-height:18.4px;
font-size:16px;
display:inline-block;
font-weight: bold;
}

もし下の隙間分だけネガティブマージンで調整する方法しかないのであればしょうがないです。
ただ解決できるのなら解決したいです！
ご回答よろしくお願いします。

Answer 1

gjpqyなどを併記するとわかるように、大文字は下方向にバッファがないと小文字がかけません
とくに記号など「()_」あたりへの影響を考えれば変なマージンは厳禁です
どうしてもデザイン上のピッタリした位置決めが必要ならsvgなどで細かい調整をするとよいでしょう

Answer 2

結論からいうと仕様だと思います。

考えられる原因１：英語フォントの高さ

学校で最初に英語を習う時、4本線の罫線ノートを使ったと思いますが、あの4本分の高さが英語フォントの1文字の高さです。

（参考画像）
https://www.google.com/search?q=%E8%8B%B1%E8%AA%9E+%E7%BD%AB%E7%B7%9A&rlz=1C5CHFA_enJP875JP876&sxsrf=ALiCzsa-kwLWjZPfSMCma8uSzIO6SMvmDg:1667897518299&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjJ_uW4mp77AhUTMN4KHX_NBesQ_AUoAXoECAEQAw&biw=1516&bih=914&dpr=2

考えられる原因２：line-height

line-heightがついていても上下に隙間ができます。
絶対に改行しない短い文字であれば、line-height: 1などにして行間をなくしてしまいましょう。
しかしこれを指定しても『考えられる原因１』の要因のため、完全に隙間がなくなるわけではないです。

まとめ

デザインは文字の端ぴったりから隙間の距離をはかりますが、コーディングでは行間を含んだはしっこから隙間の距離をはかります。
margin paddingを指定するときは、デザインより小さい数値を目分量で指定します。
これが、ピクセルパーフェクトコーディングです。

Comments

[yunosuke]

line-height1にしてもダメだったので、font-familiyなど変えてみましたが、Arialのフォントの仕様ぽいですね・・・
ネガティブマージンで無理やり真ん中にするのが無難でしょうか？

[Cocode]

どういうデザインかわからない（周囲の要素の情報がない）ので、どの手法が最適かはわかりませんが、いずれにせよ無理やりするしかないと思います〜！

[yunosuke]

ありがとうございます！参考になりました！