文字と文字の間隔をつめたい！letter-spacingを使ってみよう

<div style="letter-spacing:normal;">
	初心者マークアップエンジニアのための覚え書き
</div>

初期値は指定されているフォントの標準幅みたいなので表示されています。

<div style="letter-spacing:-0.3em;">
	初心者マークアップエンジニアのための覚え書き
</div>

比較しやすいように-0.3emを指定しました。
文字が重なって見づらいですがマイナスの数値を指定するとこのように縮めることが出来ます（下に実例あり）。

<div style="letter-spacing:0.5em;">
	初心者マークアップエンジニアのための覚え書き
</div>

プラスの数値を指定すれば文字間を広げることも可能です。あんまり見かけないですが…。

ちなみに「em単位」は1emが一文字分の長さなので、0.5emは一文字の半分の長さと考えます。
半角スペースが入っているように見えますがソースをみるとただの文字列なのです。

なぽりたん損害保険が一文字落ちてしまってますね、どうにか一行に収めたい。
※指定されているフォント（当ブログはメイリオ指定）やブラウザ（主に古いIE）によってはすでに一行に収まってる場合があります。

html

<ul>
<li><img src="画像.gif" width="130" height="50" />
<div>損保まいまい</div></li>
<li><img src="画像.gif" width="130" height="50" />
<div>なぽりたん損害保険</div></li>
<li><img src="画像.gif" width="130" height="50" />
<div>てぃーな生命</div></li>
<li><img src="画像.gif" width="130" height="50" />
<div>まるこ保険</div></li>
</ul>

css

ul li div {
	padding:10px 0;
	letter-spacing:-0.1em;
}

文字間が詰まって、一行におさめることが出来ました。
レイアウトを崩すことなく解決！知っておくと便利なのです。