本文摘自PHP中文网,作者青灯夜游,侵删。
行高是包括内容区与以内容区为基础对称拓展的空白区域;一般情况下,也可以认为是相邻文本行基线间的垂直距离。在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属性可用于设置行间的距离(行高),不允许使用负值。
line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
效果图:
(学习视频分享:css视频教程)
以上就是css中什么是行高的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者