css我爱编程

字间隔Vs字母间隔

2018-06-11  本文已影响31人  Lia代码猪崽

一、字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。
如果提供一个正长度值,那么字之间的间隔就会增加
为 word-spacing 设置一个负值,会把它拉近

<html>
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
</head>

<body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
</body>
</html>

二、字母间隔

letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。
默认关键字是 normal(这与 letter-spacing:0 相同)。
输入的长度值会使字母之间的间隔增加减少指定的量:

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>

</html>

参考文献

css文本

上一篇 下一篇

猜你喜欢

热点阅读