CSS 文章にインデントを設定するサンプル(text-indent) |

CSSの文章にインデント(字下げ)を設定するサンプルです。
text-indentプロパティを使用します。

text-indent プロパティ

text-indent : 値

値	説明
数値+単位	指定した単位で設定します。
数値+%	包含ブロックの幅に対する割合です。
値を継承する

文章にインデント(字下げ)を設定します。
適用の対象はブロック要素です。
初期値は0です。
マイナスの値を指定することができます。その場合左にずれます。
以下はMDNのtext-indentプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/text-indent

サンプル

text-indentのサンプルです。

1番上は、インデントを設定していません。通常の状態です。
2番目は、インデントを25pxで指定しています。
3番目は、インデントを-25pxで指定しています。

コード

上記サンプルのコードです。

<style>
#p1{
}
#p2{
	text-indent:25px;
}
#p3{
	text-indent:-25px;
}
p{border:1px solid #000;width:250px;height:50px;
margin-bottom:10px;text-indent:10px;background:LightCyan;}
</style>

<p id="p1">インデントなしです</p>
<p id="p2">インデント25pxです</p>
<p id="p3">インデント-25pxです</p>