Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@masakun1150

letter-spacingで文字間をつけたときに文字位置がずれるときの対処法

More than 1 year has passed since last update.

letter-spacingは文字間を調整するCSSプロパティで文字の後ろのスペースを調整します。
そのため、値分の文字の後ろにできたスペースのせいでずれてるように見えることがあります。
文字の折返しで揃えているとき、文字を中央寄せしたときなどに気になる部分で意外と困りますよね?

<div>
  <p>あいうえお<strong>かきくけこ</strong>さしすせそ</p>  
</div>
div {
    letter-spacing: 1em;
}

デモはこちら

テキストが右寄せ、左寄せ

子要素のインライン要素にネガティブマージンをかけます。

div p {
  margin-right: -1em;
}

デモはこちら

テキストが中央寄せ(1行のみ)

letter-spacingと同じ値をtext-indentで指定します。

 div {
  letter-spacing: 1em;
  text-indent: 1em;
 }

デモはこちら

テキストが中央寄せ(複数行)

右寄せ、左寄せと同様に子要素のインライン要素にネガティブマージンをかけます。

div p {
  margin-right: -1em;
}

デモはこちら

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
masakun1150
発展途上のエンドエンジニアです。 Qiitaは備忘録的な感じで投稿していきます。 誰かの役に立てたらうれしいな〜〜 以前は主にWEBサイトのフロントエンドをしてましたが転職してがっつりサーバ周りに携わってます。 サーバ系は勉強中です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?