text indent是什么意思
text-indent是用來設定文本塊中第一行的縮進。
中文名:text-indent
兼容性::IE4+ NS4+
繼承性::有
<percenge>::用百分比指定文本的縮進
分享
參數
length : 百分比數字|由浮點數字和單位標識符組成的長度值,允許為負值。請參閱長度單位
text-indent版本:CSS1
說明
檢索或設置對象中的文本的縮進。
在被另一個對象(如)斷開的對象內不能應用本屬性。
對應的腳本特性為textIndent。請參閱我編寫的其他書目。
示例
div { text-indent : 5px; }//向左縮進5px;
div { text-indent : underline 10%; }
例題:如果要首行縮進兩個字符 則div { text-indent : 2em; } 即可了
當然,也可以是負值了
瀏覽器支持
所有瀏覽器都支持 text-indent 屬性。 注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。
實例
本例演示如何縮進文本首行。
<html>
<head>
<styletype="text/css">
p{text-indent:1cm}
</style>
</head>
<body>
<p>
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
這是段落中的一些文本。
</p>
</body>
</html>
css中text-indent 詳細解釋下 什么意思 怎么用
css中的text-indent用于設置首行縮進,用法如下。
需要準備的材料分別有:電腦、瀏覽器、html編輯器。
1、首先,打開html編輯器,新建html文件,例如:index.html。
2、在index.html中的<style>標簽中,輸入css代碼:body { text-indent: 50px;}。
3、瀏覽器運行index.html頁面,此時成功設置了首行縮進是50px大小。
text indent是什么意思
text-indent 屬性規定文本塊中首行文本的縮進。
注釋:允許使用負值。如果使用負值,那么首行會被縮進到左邊。
例如:
p {text-indent: 1cm}
text-indent最常用的單位是什么
最常用單位是em,em指的是文字的倍數。
假設當前的段落字體大小是16像素,如果希望一個個段落的文字能夠“首行縮進”兩個“字符”,可以使用text-indent:32px,也可以使用text-indent:2em。設置之后,假設段落字體大小調整為14像素,如果之前設置縮進時使用的值是“32px”,此時就需要修改為“28px”,如果之前設置縮進時使用的值為“2em”,此時不需要任何變化。
為什么text-indent最常用的單位是em??
主要是為了方便維護。
假設當前的段落字體大小是16像素,如果希望一個個段落的文字能夠“首行縮進”兩個“字符”,可以使用text-indent:32px,也可以使用text-indent:2em。設置之后,假設段落字體大小調整為14像素,如果之前設置縮進時使用的值是“32px”,此時就需要修改為“28px”,如果之前設置縮進時使用的值為“2em”,此時不需要任何變化。
資料來源:《HTML5布局之路》
css 中 text-indent 與padding 有什么區別?
text-indent不影響元素的最終寬度但是有兼容性問題,padding在主流瀏覽器IE低版本下影響最終寬度,但在chrome和firefox下不影響寬度,但是可以通過CSS ret解決多瀏覽器顯示不一的問題,使得他們最終都影響寬度。
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的相應樣式: