【text-indent】1行目にインデントを挿入

text-indentプロパティでは、ブロックレベル要素内にあるテキストの1行目にインデント(字下げ)を設定することができます。

インデントには負の値も指定することが可能です。 なおテキストがボックスからはみ出るような事があれば、overflowプロパティを使用し、はみ出た部分の表示方法について指定します。

また値はパーセント、もしくは数値で指定することができますが、ともにブロックレベル要素に対して指定して下さい。

書式

  • text-indent : ……… インデント(字下げ)の指定

★:実数値+単位、パーセント値+%、inherit

実数値+単位
数値にpxやemなどの単位を付けてインデントの幅を指定します。
%値
text-indentを指定するボックスの親ボックスの幅に対する割合(%値)で、インデントの幅を指定します。

使用した時の例

.sample1 {text-indent: 3em;}
.sample2 {text-indent: 2%;}
.sample3 {text-indent: -10px;}
<p class="sample1">我々は組織構造に組み込むべき活動のすべてを知る必要はない。知らなければならないのは組織の重荷を担う部分すなわち・・・・・・</p>
<p class="sample2">企業が責任を要求された時は、必ずそれについて「権限を持っているか、持つべきか」を自問する必要がある・・・・・・</p>
<p class="sample3">アメリカの消費者運動家ラルフ・ネーダーは、自らを大企業の敵とみなしている・・・・・・</p>

ブラウザ上の表示例

我々は組織構造に組み込むべき活動のすべてを知る必要はない。知らなければならないのは組織の重荷を担う部分すなわち・・・・

企業が責任を要求された時は、必ずそれについて「権限を持っているか、持つべきか」を自問する必要がある・・・・

アメリカの消費者運動家ラルフ・ネーダーは、自らを大企業の敵とみなしている。だがそれは後々の・・・・・・・・

対応ブラウザなどのデータ

初期値 0 値の継承 継承する
適用可能な要素 ブロックレベル要素
メディア visual / text
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~