text-indent

p.test { text-indent: 0;}
p.test1 { text-indent: 10px;}
p.test2 { text-indent: 1em;}
p.test3 { text-indent: 5%;}
p.test4 { text-indent: -10px;}

値	概要
数値	数値で指定します。使用できる単位は『px』、『em』、『%』などです。負の数値も指定可能です。初期値は『0』となります。

<p style="text-indent: 0; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

<p style="text-indent: 100px; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

<p style="text-indent: 1em; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

<p style="text-indent: 10%; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

<p style="text-indent: -20px; border: solid 1px black; width: 400px; margin: 0 auto;">ここはp要素です。むかしむかし夫婦者があって、永い間、小児が欲しい、欲しい、といい暮しておりましたが、やっとおかみさんの望みがかなって、神様が願いをきいてくださいました。この夫婦の家の後方には、小さな窓があって、その直ぐ向うに、美しい花や野菜を一面に作った、きれいな庭がみえるが、庭の周囲には高い塀が建廻されているばかりでなく、その持主は、恐ろしい力があって、世間から怖がられている一人の魔女でしたから、誰一人、中へはいろうという者はありませんでした。</p>

※ バージョン情報は MDN に基づいています。

テキストの最初の段落のインデント幅を指定します。負の数値も指定可能です。

単位を『%』で指定した場合は自身のコンテンツブロックの横幅を基準とした相対値となります。