词条信息

admin
超级管理员
版本创建者 发短消息   
简易百科旧版 >> CSS 首行缩进两个文字 >> 历史版本

最新历史版本 :CSS 首行缩进两个文字 返回词条



css实现段落P 首行缩进两个文字,css 缩进2个文字间距距离。html不使用空格字符,使用css实现段首或div内文字开头时空格两个文字效果。


缩进2个文字排版效果缩进2个文字排版效果

div内文字首行就像空格一样缩进2个文字间隔位置。


缩进CSS 属性样式单词:


text-indent


设置CSS缩进值:


text-indent:2em


设置值为2em——两个相对长度单位。


假如设置字体大小为12px,为什么不设置缩进值为24px;比如设置字体大小为20px,为什么不设置缩进值为40px呢?


那就从html长度单位em解释:


相对于当前对象内文本的字体尺寸。em这个单位的意思就是相对文字大小,1em就是1个文字大小,2em就是两个文字大小。


px为相对固定像素单位,如果内容字体大小改变,而缩进px单位值是不随字体大小而改变,那么缩进就不是刚好2个文字位置空格缩进间距了,修改文字大小就要再修改缩进值,比较麻烦。


如果使用em相对文字大小为2单位(2em),无论以后对DIV字体大小、P字体大小的改变都会自适应缩进刚合适的2个文字空格效果。


实例CSS代码:


<style>

.sj-div{ text-indent:2em; font-size:12px;}

.sj-p p{ text-indent:2em; font-size:24px}

</style>


以上CSS代码如果放入CSS文件,需要去掉style标签。


实例HTML内容代码:


<div class="sj-div">

我国《商标法》规定,商标注册人享有商标专用权,受法律保护。<br />企业申请商标最大的价值就是保护自己的品牌,保证自己的品牌产品、服务正常地在市场上进行销售、推广,阻止他人的使用。

</div>

<div class="sj-p">

<p>我国《商标法》规定,商标注册人享有商标专用权,受法律保护。<br />企业申请商标最大的价值就是保护自己的品牌,保证自己的品牌产品、服务正常地在市场上进行销售、推广,阻止他人的使用。</p>

<p>一方面,商标注册遵循在先申请制度,企业如果没有注册商标,很容易被一些竞争对手和商标投机分子恶意抢注。另一方面,商标承载着品牌的商誉,是企业品牌价值的法律载体。</p>

</div>


以上HTML和CSS代码摘要重要代码与内容。


浏览器运行实例代码效果截图:


缩进设置2em 缩进设置2em

从上面实例和浏览器运行效果看出CSS排版首行缩进刚好两个文字位置,使用text-indent:2em即可完美排版实现布局需求。