「text-indent」プロパティ

テキスト・フォント

「text-indent」プロパティは、文字の1行目の字下げを指定するCSSプロパティです。
箇条書きや注意書きの文章を書く時、ブロック内のテキストの一行目に空白（字下げ）を作るために幅を設定します。

本記事の内容

「text-indent」プロパティの値
「text-indent」プロパティの指定方法

「text-indent」プロパティの値

文字の1行目の字下げを指定する単位は「px」「%」「pt」「em」などの値を指定することができます。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。

CSSでサイズ指定する単位「px」「%」「em」「rem」の違いと使い分け

CSSで文章の1行目または2行目以降の1文字下げる（インデント）方法

「text-indent」プロパティの指定方法

文字の1行目の字下げを指定する場合は、「text-indent」プロパティを使い適応する値を指定することで実装できます。

「text-indent」プロパティ

セレクタ{
text-indent:文字の1行目の字下げ;
}

値例

/* px値 */
text-indent: 10px;
text-indent: 15px;
text-indent: 20px;
text-indent: 25px;
text-indent: 30px;

/* %値 */
text-indent: 5%;
text-indent: 10%;
text-indent: 15%;
text-indent: 20%;
text-indent: 30%;

/* pt値 */
text-indent: 1pt;
text-indent: 2pt;
text-indent: 5pt;
text-indent: 10pt;

/* em値 */
text-indent: 1em;
text-indent: 2em;
text-indent: 5em;
text-indent: 10em;