サンプル - Microsoft Internet Explorer |
10pxで指定しました。 20pxで指定しました。 1emで指定しました。 |
段落にインデントをつけるには、text-indentプロパティを使います。
日本語や英語で書かれた文章では、段落の初めに一文字分のスペースをあけますが、このプロパティを使うと段落にインデントをつけることが出来ます。値には数値にptなどの単位をつけてインデントの大きさを指定します。
スタイルシートの単位にemという単位がありますが、text-indentプロパティの値に1emを指定すれば1文字分のインデントを設定することが出来ます。
また、パーセントで指定すれば、基準となる範囲内(ボックス)に対する、相対的な指定も出来ます。
サンプル - Microsoft Internet Explorer |
10pxで指定しました。 20pxで指定しました。 1emで指定しました。 |
<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>