行高是包括内容区与以内容区为基础对称拓展的空白区域；一般情况下，也可以认为是相邻文本行基线间的垂直距离。在css中可以使用line-height属性设置行高；该属性设置行间的距离（行高），不允许使用负值。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
1. 基线、底线、顶线
- 行高是包括内容区与以内容区为基础对称拓展的空白区域；一般情况下，也可以认为是相邻文本行基线间的垂直距离。
- 基线并不是汉字的下端沿，而是英文字母"x"的下端沿
2. 行距、行高
3. 内容区
立即学习“前端免费学习笔记（深入）”；
- 底线和顶线包裹的区域，实际中不一定看得到，但却是存在。
4. 行内框
- 行内框只是一个概念，它无法显示出来，但是它又确实存在
- 它的高度就是行高
- 在没有其他因素（padding）影响的时候，行内框等于内容区域
5. 行框
- 行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框
- 行框高度等于本行内所有元素中行高最大的值
元素对行高的影响
- 对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。
padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。
padding-left、padding-right、border-left和border-right可用。 - img元素会影响行高
- 设置行内元素的padding、border和margin并不会撑大外层元素的高度，如下图：
6. 设置行高
在CSS中我们可以使用line-height属性来设置行高。line-height属性可用于设置行间的距离（行高），不允许使用负值。
BJXSHOP网上开店专家
下载
BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛
line-height属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p.small {
line-height: 90%
}
p.big {
line-height: 200%
}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
</p>
</body>
</html>效果图：
（学习视频分享：css视频教程）
