<div class="box atainasi">
  <p>テキストの行間を設定するために使用します。テキストの装飾するプロパティ、字間のスペース・行ボックスの高さを設定。それぞれ、簡単に設定できる方法ここに残します。
</p>
</div>

<div class="box emsitei">
   <p>テキストの行間を設定するために使用します。テキストの装飾するプロパティ、字間のスペース・行ボックスの高さを設定。それぞれ、簡単に設定できる方法ここに残します。
</p>
</div>

<hr>

<div class="content">
<p class="normal">テキストの水平方向の、字の間隔<span class="cl">(: normal; )</span></p>
<p class="em-w">テキストの水平方向の、字の間隔<span class="cl">(: 0.1em;)</span></p>
<p class="em-ww">テキストの水平方向の、字の間隔<span class="cl">(: 1em;)</span></p>
<p class="em-mainasu">テキストの水平方向の、字の間隔<span class="cl">(: -0.1em; )</span></p>
<p class="px-ji">テキストの水平方向の、字の間隔<span class="cl">(: 2px; )</span></p>
  </div>
.atainasi {
  line-height: 1.2;
  border: solid blue
}

.emsitei {
  line-height: 1.2em;
  border: solid pink
}

p {
  font-size: 20px;
}

.box {
  width: 30em;
  display: inline-block;
  vertical-align: top;
  font-size: 10px;
}


/* .content {
  margin: 150px 150px;
} */
.cl {color: red;}
.normal   { letter-spacing: normal; }
.em-w  { letter-spacing: 0.1em; }
.em-ww { letter-spacing: 1em; }
.em-mainasu { letter-spacing: -0.1em; }
.px-ji  { letter-spacing: 2px; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.