CSS 首行缩进两个文字 css刚好空格缩进2个文字位置

2018-01-31 17:43:37 css实现段落P 首行缩进两个文字,css 缩进2个文字间距距离。html不使用空格字符,使用css实现段首或div内文字开头时空格两个文字效果。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即可完美排版实现布局需求。

更新