CSSでテキストをインデントするにはどうすればよいですか?

#CSS テキスト プロパティは、テキストの外観を定義します。

テキストのインデント

Web ページ上の段落の最初の行をインデントします。これは、最も一般的に使用されるテキスト書式設定効果の 1 つです。 (推奨学習: CSS 入門チュートリアル )

CSS は、テキストのインデントを簡単に実装できる text-indent 属性を提供します。

text-indent 属性を使用すると、すべての要素の最初の行を指定の長さ (負の値でも) だけインデントできます。

この属性の最も一般的な使用法は、段落の最初の行をインデントすることです。次のルールにより、すべての段落の最初の行が 5 em ずつインデントされます:

p {text-indent: 5em;}

注:一般に、text-indent はすべてのブロックレベル要素に適用できますが、この属性はインライン要素には適用できません。また、画像などの置換要素にも適用できません。ただし、ブロックレベルの要素 (段落など) の最初の行に画像がある場合、その行の残りのテキストと一緒に移動します。

ヒント: インライン要素の最初の行を「インデント」したい場合は、左のパディングまたはマージンを使用してこの効果を作成できます。

負の値を使用する

text-indent を負の値に設定することもできます。この手法を使用すると、最初の行が要素の残りの部分の左側にぶら下がる「ぶら下がりインデント」など、多くの興味深い効果を実現できます。

p {text-indent: -5em;}

ただし、text-indent に負の値を設定すると段落に負の値を設定すると、最初の行のテキストの一部がブラウザ ウィンドウの左端を超えてしまう可能性があることに注意してください。この表示の問題を回避するには、負のインデントに追加のマージンまたはパディングを設定することをお勧めします。

p {text-indent: -5em; padding-left: 5em;}

パーセント値を使用します

text-indent OKパーセンテージ値を含むすべての長さ単位を使用します。

このパーセンテージは、インデントされた要素の親要素の幅に相対的です。つまり、インデント値を 20% に設定すると、影響を受ける要素の最初の行が親要素の幅の 20% だけインデントされます。

次の例では、インデント値は親要素の 20%、つまり 100 ピクセルです:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

Inherited

text-indent 属性は継承できます。次のマークアップを検討してください:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

上記のマークアップの段落も 50 ピクセルインデントされます。これは、この段落が継承しているためです。内部の ID を持つ div 要素のインデント値。

以上がCSSでテキストをインデントするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。