概要
CSSプロパティ「text-indent」は、文章などの１行目のインデント（字下げ）を定義します。指定できる値として、数値、パーセント値、マイナス値を指定することができます。もし文章の段落として入れる場合は、１文字分のスペースを空けたいので、単位は｢px｣や｢em｣を使用します。指定する単位の振る舞いは以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
単位についてですが、CSS3から新しく｢rem｣という単位を使用できるようになりました。これはroot + em（ルートエム）の略でhtmlを起点としたサイズを継承します。一方「em」は環境によって大きさが変わる相対単位です。よく｢em｣と｢rem｣で比較されることが多いのでこちらの font-size で詳細を説明していますので、確認してみてください。
使用例
様々な単位の値を指定してみます。行頭のスペースの違いを確認してみてください。
<p class="px">この文章の１行目の始まりに「１０px」のインデントをつけます。これは２行目以降には反映されません。</p>
<p class="percent">この文章の１行目の始まりに「１０%」のインデントをつけます。これは２行目以降には反映されません。</p>
<p class="em">この文章の１行目の始まりに「１em」のインデントをつけます。これは２行目以降には反映されません。</p>
<p class="rem">この文章の１行目の始まりに「１rem」のインデントをつけます。これは２行目以降には反映されません。</p>
<style>
p {
background-color: #def;
margin-bottom: 10px;
}
.px {
text-indent: 10px;
}
.percent {
text-indent: 10%;
}
.em {
text-indent: 1em;
}
.rem {
text-indent: 1rem;
}
</style>実装例として、マイナス値を指定して、ぶら下げインデントを実装してみます。ポイントは padding プロパティで左に余白を作り、text-indent プロパティで1文字分左にずらしています。また指定する単位を ｢em｣ にすることで、その要素で定義している font-size の値を基準にしたスペースがとられます。
<p class="px14">※文字サイズが14pxの文章を書きました。14pxの文字１つ分のインデントが作られています。</p>
<p class="px20">※文字サイズが14pxの文章を書きました。14pxの文字１つ分のインデントが作られています。</p>
<style>
p {
background-color: #def;
}
.px14 {
font-size: 14px;
padding: 1em;
text-indent: -1em;
}
.px20 {
font-size: 20px;
padding: 1em;
text-indent: -1em;
}
</style>