我们可以使用line-height属性来设置行高，进而调整行间距。
那么什么是行高？
行高是包括内容区与以内容区为基础对称拓展的空白区域。一般情况下，也可以认为是相邻文本行基线间的垂直距离。
而基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。
line-height属性
line-height属性可用于设置行间的距离（行高），不允许使用负值。
line-height属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
语法：
line-height:value;
可能的值
normal：默认。设置合理的行间距。
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距。
%：基于当前字体尺寸的百分比行间距。
示例：调整行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
border: 3px solid pink;
}
p.small {
line-height: 10px;
}
p.big {
line-height: 50px;
}
</style>
</head>
<body>
<p>
这是一个标准行间距的段落。<br>
这是一个标准行间距的段落。<br>
</p>
<p class="small">
这是一个更小行间距的段落。<br>
这是一个更小行间距的段落。<br>
这是一个更小行间距的段落。<br>
这是一个更小行间距的段落。<br>
</p>
<p class="big">
这是一个更大行间距的段落。<br>
这是一个更大行间距的段落。<br>
这是一个更大行间距的段落。<br>
这是一个更大行间距的段落。<br>
</p>
</body>
</html>效果图：
更多前端开发知识，请查阅 HTML中文网 ！！
以上就是css行间距怎么调？的详细内容，更多请关注0133技术站其它相关文章！
