CSSテキスト属性のtext-indentの解析

テキスト属性 text-indent は、テキストの最初の行のインデントを設定するために使用されます。どの要素でも、最初の行を指定された長さでインデントできます。長さは負の数にすることもできます。

p{text-align:2em;}

このルールは、段落の最初の行を 2 文字インデントします。

通常、text-indent はブロックレベルの要素に適用できますが、最初の行に画像がある場合は、インライン要素や置換要素には適用できません。段落の部分を選択すると、テキストと一緒に移動します。

text-indentは、

• p{text-indent:-2em;}などの負のテキストインデントをサポートします

ここのすべての段落の最初の行は、テキスト2つ分前に移動されますサイズ。ただし、負の text-indent を使用する場合は、テキストが要素からはみ出すため、期待する効果が得られない可能性があることに注意してください。

ここで注意する必要があるのは、パーセントの使用です。インデント値が 5% に設定されている場合、この要素の最初の行は 5% ずつインデントされます。親要素の幅。例:

• p{width:400px;}

• p{text-indent:5%;}

これは段落ですテキストのインデント率の使用をテストします

テキストの最初の行が 20px だけインデントされていることがわかります。計算原理は、親要素 400x5% = 20px です。もちろん、ここには p 要素がないことに注意する必要があります。 幅を設定すると、幅はそれ自身の幅のパーセンテージとして計算されます。

しかし、text-indent で最も興味深いのは、おそらく、宣言された値ではなく計算された値を継承する継承です。

• body{width：500px;}

• p{width：400px; text-indent：10％;}

• p{width：200px;}

<span style="font-size: 14px;"><p><br/>这是外面的文字<br/><p>这是里面的文字</p><br/></p></span>

ここでは、テキストの 2 つの段落の最初の行が 50px の外側のテキストではなく 50px でインデントされ、p 要素内のテキストが 40px でインデントされていることがわかります。宣言された値ではなく、計算された値を継承します。

関連する推奨事項:

CSS でテキストインデントを使用する方法

以上がCSSテキスト属性のtext-indentの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。