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

CSSのtext-indentのサンプルです。

目次

サンプル text-indentプロパティ
  インデントなし
  インデントを25pxで指定
  インデントを-25pxで指定

text-indentプロパティ

text-indent : 値

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>

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

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS font-weight 文字の太さを指定する
CSS font-style 文字を斜体にするサンプル

△上に戻る