css屬性之text-indent下圖片也縮排的處理
阿新 • • 發佈：2019-01-30
定義
text-indent 屬性規定文字塊中首行文字的縮排。
註釋：允許使用負值。如果使用負值，那麼首行會被縮排到左邊。
說明：用於定義塊級元素中第一個內容行的縮排。這最常用於建立一個“標籤頁”效果。允許指定負值，這會產生一種“懸掛縮排”的效果。
| 值 | 描述 |
|---|---|
| length | 定義固定的縮排。預設值：0。 |
| % | 定義基於父元素寬度的百分比的縮排。 |
| inherit | 規定應該從父元素繼承 text-indent 屬性的值。 |
2.DOM中的textIndent屬性
定義和用法
textIndent 屬性縮排元素中的首行文字。
語法：
Object.style.textIndent=length|%
值
| 值 | 描述 |
|---|---|
| length | 定義固定的縮排。預設值：0。 |
| % | 定義基於父元素寬度的百分比的縮排。 |
看上去這個屬性跟其他屬性一樣普通·簡單，只是一個首行縮排而已，但在使用過程中細心的人或許會發現，例如在給正文的p標籤內設定了text-indent屬性後，正文內的圖片也會被縮排，及影響美觀也影響排版，而且對圖片的大小把控也比較困難，所以很多人會選擇放棄使用這個屬性。。。
剛開始我也不例外，後來實在是不忍放棄，查閱資料外加自己試驗後發現，text-indent屬性有個很奇怪的特點，在其內部元素遇到float或者display:
block後就不繼承外部這個縮排的屬性了，所以只要給圖片加上 float或者display:
block的 這個CSS 屬性後，圖片所繼承的縮排會自動失效。