文字をぴったり正方形で囲みたい

Question

前提・実現したいこと

文章の中に出てくるある特定の文字を、ぴったり正方形で囲みたいと思っています。その際に他の文字とずれないことが条件です。
理想の見た目は以下の画像の通りです。(画像は編集しています。)

発生している問題

ボーダーで囲んだ文字の下に空白ができてしまい、長方形になってしまいます。

該当のソースコード

文字文字文字<span class="kakomi">あ</span>文字文字文字

.kakomi {
  border: 1px solid;  
}

試したこと

幅と高さを指定するために、以下のcssを追加しました。

  display: inline-block;
  width: 1em;
  height: 1em;

しかし、文字から枠がずれてしまいました。

Comments

[int32_t]

現在質問文に書かれているコードだけでは問題が再現しませんでした。border だけで正方形になります。

問題が再現する完全な HTML と CSS のコードと確認した環境(OSとブラウザ)を開示してください。

[退会済みユーザー]

上記HTMLとCSS(一部修正)のみで再現しました。
Windows 10 上の Chrome 93.0.4577.82 と、Android 11 上の Chrome 93.0.4577.82 において再現することを確認しています。

[int32_t]

フォントは何が使われていますか?
Meiryo と Yu Gothic で問題が出て MS Gothic だと問題なかったりしますか?
(私はいま再現環境がないので試せません)

Answer 1

フォントにもよりますが、一応だいたいこんな感じで。（line-heightにあわせてwidth/heightも変えればよいとは思う）

.kakomi {
  border: 1px solid;
  display: inline-block;
  width: 1em; /* line-heightが1.5なら1.5emとかすれば line-height: 1;にしなくて良いかも */
  height: 1em;
  line-height: 1;
  text-align: center;
}
```**動くサンプル：**[https://jsfiddle.net/5gkqpu72/](https://jsfiddle.net/5gkqpu72/)

Comments

[kei344]

https://jsfiddle.net/4q6z3cf5/
文字にはベースラインとか個別の空間もついてくるので、厳密な意味での中央はCSSでは難しいと思います。