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內部，因此所有文字都會左移。
23efcc05e98690ceeb219581933e4231作為一個inline-block層級的標籤，它是固定單行顯示的（而且還和white-space機制不一樣），上面所述區別並不存在。
那麼區別在哪裡呢：
　　1、text-indent基於行內排版，導致應用了direction: rtl之後，text-indent提供的indent出現在右側；padding -left則不受direction影響。
　　當然，direction這個屬性不常用於23efcc05e98690ceeb219581933e4231
　　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中文網其他相關文章！