CSS 如何调节设置每行文字字体间距 (行距), 使得每行的文字一定的间距距离? 下面本篇文章就来给大家介绍使用 CSS 设置文字行间距的方法, 希望对大家有所帮助.
要想使得每行的文字一定的间距距离可以通过 CSS 的 line-height 属性来实现. line-height 属性用于设置行使用的空间量, 即行间的距离 (行高); 不允许使用负值.
语法:
line-height: normal|number|length|%;
属性值:
● normal: 默认值, 设置合理的行间距.
● number: 设置无单位数字, 此数字会与当前的 font-size 相乘来设置行间距.
● length: 设置固定的行间距.
● %: 基于当前字体尺寸的百分比行间距.
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .small {
- line-height: 70%;
- }
- .big {
- line-height: 200%;
- }
- .length {
- line-height: 50px;
- }
- </style>
- </head>
- <body>
- <p>
这是一个标准行高的段落.<br> 这是一个标准行高的段落.
- <br>
- <b > 大多数浏览器的默认行高约为 110% 至 120%.</b><br>
- </p>
- <hr>
- <p class="small">
这是一个更小行高的段落.<br> 这是一个更小行高的段落.
- <br> 这是一个更小行高的段落.
- <br> 这是一个更小行高的段落.
- <br>
- </p>
- <hr>
- <p class="big">
这是一个更大行高的段落.<br> 这是一个更大行高的段落.
- <br> 这是一个更大行高的段落.
- <br> 这是一个更大行高的段落.
- <br>
- </p>
- <hr>
- <p class="length">
这是一个固定行高的段落.<br> 这是一个固定行高的段落.
- <br> 这是一个固定行高的段落.
- <br> 这是一个固定行高的段落.
- <br>
- </p>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10475.html