摘要：整理一下关于行高的一些基本概念。行框的高度是这一行行内框的最高点到最低点的距离。所以在没有设置固定高度的元素中，高度是由这个元素中所有行框高度叠加而成的。提示有种说法是行框的高度等于这一行中行内框中最大的，这种说法是错误的。
整理一下关于行高的一些基本概念。原文链接：http://www.zengkan.win/?p=84
1.定义每个文本行中可以看做有四条线：顶线，中线，基线和底线。类似英语作业本上的“四线三格”。如下图（图片来自@梦禅的文章）
line-height 行高就是指两个文本行相同线之间的距离。同一行的顶线到底线的距离就是内容区域高度，内容区域的高度只与字体和字号有关，在有的字体(simsun等)中，字体大小等于内容区域高度。上一行的底线和下一行的顶线的距离是行间距。可以看出，行高 = 内容高度+行间距，当我们改变 line-height 的值时，内容高度是不变的，改变的只是行间距，从而改变了行高。
一个空元素的高度默认是0，而当这个元素中有内容时，元素就会被撑开，会有高度。之前我以为这个高度是文字的高度撑开的，而从@张鑫旭的文章中知道这个高度是由 line-height撑开的。以下代码结果如下：
行高为1行高为默认
第一个 div 的行高为1像素，字体大小为20像素，最终高度为1像素；
第二个 div 行高为20像素，字体大小为0，最终高度是20像素。说明在没有设置固定高度的元素中，高度并不是由文字撑开，具体高度是怎么产生的，先了解下面的几个概念。
行内框 inline boxes ：行框下面的每一个标签（包括文本标签）都是一个多带带的行内框。行内框的高度由行高line-height决定。
行框line boxes ：每行文字都是一个行框，行框包含这一行行内框的最高点和最低点。行框的高度是这一行行内框的最高点到最低点的距离。The line box height is the distance between the uppermost box top and the lowermost box bottom.
包含盒子containing box：元素中行框的高度垂直叠加形成包含盒子的高度，也就是元素的高度。
所以在没有设置固定高度的元素中，高度是由这个元素中所有行框高度叠加而成的。
提示： 有种说法是行框的高度等于这一行中行内框中最大的line-height，这种说法是错误的。
行内框1,行高30px行内框2,行高50px,
上述代码结果如上图，这个 div 中的行内框最大的行高是50像素，但由于这个行内框存在 vertical-align 偏差，所以这个行框的高度大于50像素。也就是行框的高度是这一行行内框的最高点到最低点的距离。
4.继承line-height 属性是可以继承的，不过继承规则因父元素的取值而异。具体如下表：
值得注意的是，父元素的 line-height 值设置为130%或1.3对本身来说是一样的，但对于下面的子元素来说两种设置方式的继承规则不一样，所以继承到的行高也是有差别的。
上面图片中，外面元素没有设置height，由内容撑开，但是图片下方默认会有一些间距。这个间距产生的原因：图片和文字是同一个行框下的行内框，二者默认基线对齐，下面的边距其实是基线和底线之间的距离。当父元素中只有图片这一个元素时，也会有这个问题，可以看做是元素内部默认会有一个空白的文字节点。
解决办法：
设置父元素 line-height 为0，基线和底线就会重合，间距就会消失。
图片设置 vertical-aligh 为 bottom ，底线对齐。
图片设置 display 为block，因为块元素没有vertical-align属性，所以不存在基线对齐。
上面三种办法中，1和3会影响父元素内的文字状态，所以第二种办法比较好。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115471.html
摘要：基本概念行高行距行高是指文本行基线间的垂直距离。行框行框是指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。行框高度等于本行中所有行内框高度的最大值。设置合理的行间距。设置固定的行间距。 又已经快十天没有写文章了，一周一篇其实好艰难的说……本来想接着上篇事件（上篇）总结事件类型的，可是看完之后整理下还是有点乱，就一直拖着没写……实在是不能再...
摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。 上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...
摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。 张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义 行高：两行文字基线之间的距离 为何是基线：基线是定义所有字线的根本 不同字体...
摘要：理解字体和文本属性，对于创造出专业水准的网页排版非常重要。为字体和文本分别定义了属性。字体属性主要描述了一类字体的大小和外观。还有一种新增的单位字体样式值示例说明和都表示斜体英文中的斜体主要表示强调。字体粗细可能的值，或者和。 理解字体和文本属性，对于创造出专业水准的网页排版非常重要。一个网站的品质如何，有时候只要看看它用的字体就能一目了然。 1.网页中字体的来源 用户机...
摘要：在元素中使用元素是一个元素，没有结束标记表示链入的是样式表，在中可省略不写。一般页面中，中文用宋体黑体微软雅黑，英文使用。英文字体要放在最前面，中文字体后面的备选字体用逗号隔开。表示方法可用像素指定或使用或百分数相对于字体大小指定。 一、基础介绍 1， css：cascading style sheet 层叠式样式表2， 语法：p {background-color:red...
阅读 1375·2021-10-11 10:59
阅读 3056·2019-08-30 15:54
阅读 2663·2019-08-30 13:19
阅读 2379·2019-08-30 13:02
阅读 2324·2019-08-30 10:57
阅读 3275·2019-08-29 15:40
阅读 881·2019-08-29 15:39
阅读 2207·2019-08-29 12:40
