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

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

text-indent プロパティ

text-indent : 値

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

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

コード

サンプルのコードです。
5,8行目でtext-indentプロパティを指定をしています。

<style>
#p1{
}
#p2{
	text-indent:15px;
}
#p3{
	text-indent:-15px;
}
#div1 p{font-size:16px;width: 200px;height:70px;line-height:1.2;
background-color:LightCyan;border:1px solid #000;margin:10px 20px;
}
</style>
<body >
<div id="div1">
	<p id="p1">インデントなしインデントなし<br>改行しました</p>
	<p id="p2">インデント15pxインデント15px<br>改行しました</p>
	<p id="p3">インデント-15pxインデント-15px<br>改行しました</p>
</div>
</body>

サンプル

上記コードのサンプルです。
1つ目はインデントなしです。
2つ目はインデントを15pxにしています。
3つ目はインデントを-15pxにしています。

インデントなしインデントなし
改行しました

インデント15pxインデント15px
改行しました

インデント-15pxインデント-15px
改行しました