CSS text-indent 文章にインデントを設定する

目次	text-indentとは
	インデントなし
	インデントを25pxで指定
	インデントを-25pxで指定

text-indentとは

text-indentプロパティは、文章のインデント(字下げ)を指定します。

適用の対象はブロック要素です。

書き方	text-indent : 値
数値+単位	指定した単位で設定します。マイナスの値を指定することができます。その場合左にずれます。
数値+%	包含ブロックの幅に対する割合です。
初期値	0
継承	継承する
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/text-indent

インデントなし

<style>
  .p1 {
    border: 1px solid #000;
    width: 250px;
    height: 50px;
    background: LightCyan;
  }
</style>
<p class="p1">インデントの確認</p>

インデントがない状態です。

インデントを25pxで指定

<style>
  .p1 {
    border: 1px solid #000;
    width: 250px;
    height: 50px;
    background: LightCyan;
    text-indent: 25px;
  }
</style>
<p class="p1">インデントの確認</p>

インデントを指定すると、数値の分右にずれます。

インデントを-25pxで指定

<style>
  .p1 {
    border: 1px solid #000;
    width: 250px;
    height: 50px;
    background: LightCyan;
    text-indent: -25px;
  }
</style>
<p class="p1">インデントの確認</p>

インデントがマイナス値の場合、左にずれます。