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不影響元素的最終寬度但是有相容性問題，padding在主流瀏覽器IE低版本下影響最終寬度，但在chrome和firefox下不影響寬度，但是可以通過CSS reset解決多瀏覽器顯示不一的問題，使得他們最終都影響寬度。
text-indent和padding的基本區別：
1、padding基於盒模型，適用於inline和block層級的元素
2、text-indent基於行內排版，僅僅適用於block層級的元素，作用於block層級的元素的內部第一行文字
padding會作用於inline框或block框的左側padding地區，會影響到content-box，而文字子節點會出現在content-box內部，因此所有文字都會左移。
<input type="text">作為一個inline-block層級的標籤，它是固定單行顯示的（而且還和white-space機制不一樣），上面所述區別並不存在。
那麼區別在哪裡呢：
　　1、text-indent基於行內排版，導致應用了direction: rtl之後，text-indent提供的indent出現在右側；padding-left則不受direction影響。
　　當然，direction這個屬性不常用於<input type="text">
　　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的相應樣式：