關於css的text-indent首行縮進兩個字符和圖片縮進的問題


段落前面空兩個字的距離,不要再使用空格了。應該使用首行縮進text-indent。

text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。

<style type="text/css">

p{

text-indent: 2em; /*em是相對單位,2em即現在一個字大小的兩倍*/

}

</style>

 

注:div標簽不要忘記起始符。text-indent只對p或div標簽有效,對br標簽不生效,原因是br標簽是換行標簽不是分段標簽。

用CSS實現段落首縮進兩個字符,實現首行縮進的通用方法是加四個小角空格。

在style里定義如下縮進樣式:.suojin{text-indent:2em}

在需要縮進的地方使用class="suojin"即可,比如用一個div定義一整塊段落首先縮進,

凡在div區域里,瀏覽器一碰上p語句(即一個新段的開始),就會執行.suojin所定義的縮進。

也可以在正文中使用嵌入式CSS樣式來定義,下面舉個實例(使用時請將尖括號改為小角尖括號):

<div style="text-indent:2em">

<p>段落一</p>

<p>段落二</p>

<p>段落三<p>

</div>

可加了這個縮進后當遇到正文內容中有獨立段落的圖片時,圖片也會被縮進,這樣會很影響排版。而且對於縮進后的圖片大小也不好把握,對於自適應主題尤其如此。所以很多人因為搞不定圖片這個問題最后放棄了使用段落首行縮進。

其實text-indent有個很奇怪的屬性,就是其內部元素遇到float或者display: block后就不繼承外部這個縮進的屬性了,也就是說,只要給圖片加上float或者display: block的 CSS 屬性后,圖片的縮進會自動失效。

但是為了排版的效果,一般都使用display:block;,這樣圖片就不會與文字並排,圖片單獨占一行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM