【html每个段落首行缩进】前端需要知道的冷知识1个字间距|单词间距|行间距|首行缩进

注：测试浏览器版本号3354 chrome 75 . 0 . 3770 . 80；opera 60 . 0 . 3255 . 109；Firefox 67.0:Ie 11。

今天将设计稿还原到html页面，在设置字母间距/标点挤压/行距/首行缩进时发现了有趣的冷门，对冷门也很有帮助啊！

1个字符的间隔

字母间距顾名思义就是字母之间的间距。这通常都用在大写的英语题目上。我们使用letter-spacing设置。以下面的代码为例。

！-字母间距-

p style=' letter-spacing 3360 2px ' English test/p

p style=' letter-spacing 3360 0 . 5 px ' English test/p

p英语测试/p

p style=' letter-spacing 3360-0 . 5 px ' English test/p

p style=' letter-spacing 3360-2px ' English test/p

P style=' letter-spacing 3360 2px '中文测试/p

p style=' letter-spacing 3360 0 . 5 px '中文测试/p

p中文测试/p

p style=' letter-spacing :-0.5 px '中文测试/p

P style=' letter-spacing 3360-2px '中文测试/p

结果如下。因此，letter-spacing以字符为单位计算间距，如果是中文，则以单个中文字符为单位计算间距。

两个字符间隔

单词间距是单词和单词之间的间距，使用word-spacing设置。以下面的代码为例。

！-单词间距-

p style=' word-spacing 3360 10px ' English test/p

p style=' word-spacing 3360 5 px ' English test/p

p英语测试/p

p style=' word-spacing 3360-5 px ' English test/p

p style=' word-spacing :-10px ' English test/p

P style=' word-spacing 3360 10px '中文测试/p

P style=' word-spacing 3360 5px '中文测试/p

p中文测试/p

P style=' word-spacing 3360-5px '中文测试/p

P style=' word-spacing 3360-10px '中文测试/p

P style=' word-spacing 3360 10px '中文测试/p

P style=' word-spacing 3360 5px '中文测试/p

p中文测试/p

P style=' word-spacing 3360-5px '中文测试/p

P style=' word-spacing 3360-10px '中文测试/p

结果如下。对照组实验表明，word-spacing属性实际上是根据文本中的空格来区分单词的。请注意这一点。

mp;_iz=31825&index=2" width="640" height="715"/>

3 行间距

我们使用line-height来设置行间距，其是属性值如下

line-height:normal(默认) | number | length | percentage | inherit

属性值分别代表的含义是：1. 常规合理值；2. 数值（不带单位 此时间距=数值*font-size）；3. 具体值（带单位）；4. 百分比（相对于当前元素的font-size）；5. 继承。

以下面代码为例：

<!– 行间距 –>
父元素设置了行间距
<div style="line-height: 50px">
<p style="line-height: 0.5">english test</p>
<p style="line-height: 10px">english test</p>
<p >english test</p>
<p style="line-height: 50%">english test</p>
<p style="line-height: inherit">english test</p>
</div>
父元素未设置行间距
<div>
<p style="line-height: 0.5">english test</p>
<p style="line-height: 310px">english test</p>
<p >english test</p>
<p style="line-height: 50%">english test</p>
<p style="line-height: inherit">english test</p>
</div>

得到结果如下图。通过检查元素可以发现：1. normal和inherit取值是一样的，父元素没有设置line-height值就normal，父元素有设置line-height值就继承；2. chrome计算行间距时会出现偏差，如本例中line-height值为0.5/10px/50%时，其行高均为9.6px，而不是设想的10px，该现象在其他测试浏览器中均为出现；3. 设置行间距后，该元素垂直方向居于中间，不管元素的字体多大，其占据的高度是行间距的数值。

通过以上实验我们还有一个比较重要的问题没有解决——当line-height属性值为normal时（父元素未设置line-height属性值），元素行间距到底时多少？

首先一点可以确定的是：当font-size相同的情况下，font-family不同，行间距不同，而且没有规律。这点我们暂时不讨论，我们需要讨论的是当font-family相同而font-size不同时，行间距有没有什么变化规律？我们设置以下实验组和对照组。

<!– 设置font-family:'Times New Roman'; –>
<p style="font-size: 10px">english test</p>
<p style="font-size: 20px">english test</p>
<p style="font-size: 30px">english test</p>
<p style="font-size: 40px">english test</p>
<p style="font-size: 50px">english test</p>
<p style="font-size: 60px">english test</p>
<p style="font-size: 70px">english test</p>
<p style="font-size: 80px">english test</p>
<p style="font-size: 90px">english test</p>
<p style="font-size: 100px">english test</p>

整理结果得到下图中fong-size与line-height的关系数据表格及折线图。由图我们发现：1. 不同浏览器的结果不同但近似；2. font-size越大，对应的line-height越大，且近乎呈线性关系；3. ie中font-size与line-height呈线性关系，且line-height=1.15*font-size。

4 首行缩进

没有什么特别困难的点，我们只需要记住用法就可以了。

text-indent: length(默认为0) | percentage(当前元素宽度百分比) | inherit（继承）;