codeazuki
@codeazuki

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

不自然な空白

.料理{
margin: 2px auto;
padding:5px 50px;
border-radius: 99px;
background-color:#eee;
font-size: 30px;
font-weight: 999;
font-family:"Noto Serif JP", serif;
align-items: center;
border-bottom: solid 5px #999;
letter-spacing: .3em;
}

料理

スクリーンショット (100).png

画像のように、料理の文字の間に、letter-spacingで空白を入れたが、右側にも不自然な空白ができた。文字の間を開け、かつ中央に揃えるためにはどうすればいいですか?

0

1Answer

text-indent: .3em; を追加して調整してください。


letter-spacing が字間ではなく字の後ろにスペースを追加するせいでセンタリングと組み合わせるとズレるのは、昔からあるブラウザのバグのようです。

1Like

Your answer might help someone💌