关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空兩個字的距離,不要再使用空格了。應(yīng)該使用首行縮進(jìn)text-indent。
text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個漢字。
<style type="text/css">
p{
text-indent: 2em; /*em是相對單位,2em即現(xiàn)在一個字大小的兩倍*/
}
</style>
?
注:div標(biāo)簽不要忘記起始符。text-indent只對p或div標(biāo)簽有效,對br標(biāo)簽不生效,原因是br標(biāo)簽是換行標(biāo)簽不是分段標(biāo)簽。
用CSS實現(xiàn)段落首縮進(jìn)兩個字符,實現(xiàn)首行縮進(jìn)的通用方法是加四個小角空格。
在style里定義如下縮進(jìn)樣式:.suojin{text-indent:2em}
在需要縮進(jìn)的地方使用class="suojin"即可,比如用一個div定義一整塊段落首先縮進(jìn),
凡在div區(qū)域里,瀏覽器一碰上p語句(即一個新段的開始),就會執(zhí)行.suojin所定義的縮進(jìn)。
也可以在正文中使用嵌入式CSS樣式來定義,下面舉個實例(使用時請將尖括號改為小角尖括號):
| <div style="text-indent:2em"> <p>段落一</p> <p>段落二</p> <p>段落三<p> </div> |
可加了這個縮進(jìn)后當(dāng)遇到正文內(nèi)容中有獨立段落的圖片時,圖片也會被縮進(jìn),這樣會很影響排版。而且對于縮進(jìn)后的圖片大小也不好把握,對于自適應(yīng)主題尤其如此。所以很多人因為搞不定圖片這個問題最后放棄了使用段落首行縮進(jìn)。
其實text-indent有個很奇怪的屬性,就是其內(nèi)部元素遇到float或者display: block后就不繼承外部這個縮進(jìn)的屬性了,也就是說,只要給圖片加上float或者display: block的 CSS 屬性后,圖片的縮進(jìn)會自動失效。
但是為了排版的效果,一般都使用display:block;,這樣圖片就不會與文字并排,圖片單獨占一行。
轉(zhuǎn)載于:https://www.cnblogs.com/wangyongx/p/5021359.html
總結(jié)
以上是生活随笔為你收集整理的关于css的text-indent首行缩进两个字符和图片缩进的问题的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HashSet中是如何判断元素是否重复的
- 下一篇: 用Qemu模拟vexpress-a9 (