point 段落にインデントをつける

text-indent:

指定できる値
スタイルシートでの単位指定
数値にptなどの単位をつけて指定する
パーセントで指定

段落にインデントをつけるには、text-indentプロパティを使います。

日本語や英語で書かれた文章では、段落の初めに一文字分のスペースをあけますが、このプロパティを使うと段落にインデントをつけることが出来ます。値には数値にptなどの単位をつけてインデントの大きさを指定します。

スタイルシートの単位にemという単位がありますが、text-indentプロパティの値に1emを指定すれば1文字分のインデントを設定することが出来ます。

また、パーセントで指定すれば、基準となる範囲内(ボックス)に対する、相対的な指定も出来ます。

サンプル - Microsoft Internet Explorer

10pxで指定しました。
10pxインデントされてます。

20pxで指定しました。
20pxされてます。

1emで指定しました。
1文字分インデントされてます。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
.test1  { text-indent:10px; }
.test2  { text-indent:20px; }
.test3  { text-indent:1em;  }
.test4  { text-indent:5%;   }
-->
</style>
</head>
<body>
<p class="test1">10pxで指定しました。<br>
10ptインデントされてます。</p>
<p class="test2">20pxで指定しました。<br>
20ptされてます。</p>
<p class="test3">1emで指定しました。<br>
1文字分インデントされてます。</p>
<p class="test4">5%で指定しました。<br>
5%インデントされてます。</p>
</body>
</html>

スポンサード・リンク