CSSにおけるtext-indentの使い方とpaddingとの違いを詳しく解説

構文:
text-indent : length

パラメータ:

length : パーセント数値 | 浮動小数点数と単位識別子で構成される長さの値。 「長さの単位」を参照してください。

説明:

オブジェクト内のテキストのインデントを取得または設定します。
この属性は、別のオブジェクト (など) によって切断されているオブジェクト内では適用できません。
対応するスクリプト機能は textIndent です。私が書いた他の本もご覧ください。

例:

div { text-indent : -5px; } 
div { text-indent : underline 10%; }

CSS で text-indent を使用する方法
text-indent
は、Word の最初の行のインデントと同じように、テキストの最初の行のインデントを表します
例: 最初の行が必要です2 でインデントされる段落の 漢字の場合、このテキストのフォント サイズは 12px です
それを入れてください
ここにテキストがあります
定義は次のとおりです
p{text-indent:25px;}

CSSのtext-indentとpaddingの違いは何ですか？

text-indent は要素の最終的な幅には影響しませんが、互換性の問題があります。パディングは、主流のブラウザ IE の下位バージョンでは最終的な幅に影響しますが、Chrome と Firefox では影響しません。ブラウザの表示の問題は CSS のリセットによって解決されるため、最終的には幅に影響します。
テキストインデントとパディングの基本的な違い:
1. パディングは ボックスモデル に基づいており、インラインおよびブロックレベルの要素に適用されます
2. テキストインデントはインラインタイプセットに基づいており、ブロックレベルの要素にのみ適用されます要素内のテキストの最初の行
パディングは、インラインボックスまたはブロックボックスの左側のパディング領域に作用し、コンテンツボックスに影響し、テキストの子ノードがコンテンツ内に表示されます-box を使用すると、すべてのテキストが左側に移動します。
インラインブロックレベルのラベルとして、固定の単一行で表示されます (空白のメカニズムとは異なります)。
では、違いは何ですか: 1. text-indent はインライン植字に基づいており、
direction: rtl を適用した後、text-indent によって提供されるインデントが右側に表示されます。方向。 もちろん、direction 属性は一般的に には使用されません 2. padding-left はボックス モデルに基づいているため、box-sizing 属性は要素の最終的な幅に影響しますpadding-left 属性と width 属性を組み合わせても、Text-indent は要素の幅に影響を与えません。 これは非常に重要です。なぜなら、webkit と Firefox のデフォルトのスタイルシートは、input 要素の box-sizing: border-box を設定するためです。width と padding-left を同時に設定すると、webkit/ で多くの問題が発生します。 Firefox と IE の低バージョンでは幅が大きく異なります。
したがって、padding-left を使用する場合は、webkit と Firefox の対応するスタイルをリセットする必要があります:

以上がCSSにおけるtext-indentの使い方とpaddingとの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。