text-indentプロパティ
text-indent : 値 |
text-indentプロパティは、文章のインデント(字下げ)を指定します。
値 | 説明 |
---|---|
数値+単位 | 指定した単位で設定します。 |
数値+% | 包含ブロックの幅に対する割合です。 |
値を継承する |
- 適用の対象はブロック要素です。
- 初期値は0です。
- マイナスの値を指定することができます。その場合左にずれます。
- 以下はMDNのtext-indentプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/text-indent
文章のインデント(字下げ)を指定するサンプルです。
インデントなし
<style>
#p1 {
border: 1px solid #000;
width: 250px;
height: 50px;
background: LightCyan;
}
</style>
<p id="p1">インデントの確認</p>
インデントがない状態です。
インデントを25pxで指定
<style>
#p1 {
border: 1px solid #000;
width: 250px;
height: 50px;
background: LightCyan;
text-indent: 25px;
}
</style>
<p id="p1">インデントの確認</p>
インデントを指定すると、数値の分右にずれます。
インデントを-25pxで指定
<style>
#p1 {
border: 1px solid #000;
width: 250px;
height: 50px;
background: LightCyan;
text-indent: -25px;
}
</style>
<p id="p1">インデントの確認</p>
インデントがマイナス値の場合、左にずれます。
関連の記事
CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS font-weight 文字の太さを指定する
CSS font-style 文字を斜体にするサンプル