word-spacingとletter-spacingの違い

word-spacingとは

単語と単語（word）の間隔（space）を調整するプロパティです。ようは半角スペースのサイズを調整することができます。初期値はnormalです

word-spacing:1em;

i have a pen.

word-spacing:-0.4em;

i have a pen.

letter-spacingとは

文字間を調整するプロパティです。初期値はnormalです。

letter-spacing:1em;

ピコ太郎「i have a pen」

letter-spacing:-0.4em;

ピコ太郎「i have a pen」

違い

word-spacingが単語間（半角スペース）のサイズを調整するのに対し、letter-spacingは1文字1文字の間隔を調整します。

word-spacingを使った小細工

下記のコードはinline-blockで.itemを横並びにするものです。word-spacingで改行の際に生じるスペースを除去しています。

<style scoped>
.list { word-spacing:-0.4em; }
.item { width:25%; display:inline-block; vertical-align:top; background:red; word-spacing:normal; }
</style>

<div class="list">
  <div class="item">CONTENTS</div>
  <div class="item">CONTENTS</div>
  <div class="item">CONTENTS</div>
  <div class="item">CONTENTS</div>
</div>

CONTENTS

関連記事