DTPではよく使われる「段落先頭1字下げ」など、テキストインデントのサンプルを紹介します。
HTML
<p class="sample1">段落先頭1字下げ。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p class="sample2">★段落先頭-1字下げ。いわゆるぶら下げインデント。頭に記号なんかを付けたい時に使う場合あり。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p class="sample3">段落先頭2字下げ。中国語圏ではこれがスタンダードのようです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p class="sample4">段落全体を3字下げ。まれにblockquoteの代わりに使うことがあるかも?ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
CSS
.sample1 {
text-indent: 1em;
}
.sample2 {
text-indent: -1em;
margin-left: 1em;
}
.sample3 {
text-indent: 2em;
}
.sample4 {
margin-left: 3em;
}
表示サンプル
サンプルhtml
基本的にはtext-indentプロパティでインデントの幅をem単位で調整しています。
簡単なので機会があれば使ってみてください。