摘要：行高行距半行距从上到下四条线分别是顶线，中线，基线，底线。行高指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。父元素不同的行高单位影响子元素的继承。
行高、行距、半行距
从上到下四条线分别是 顶线，中线，基线，底线。
行高指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。
行高数值上等于 字体大小+行距，而行距的一半（半行距）加在顶线上方，一半加在底线下方。
指一行底线到下一行顶线的垂直距离。
半行距行距的一半。半行距 = (行高 - 字号) / 2
CSS 中的 margin-top 不是从文字的顶线算起的，而是从离顶线半个行距的上方开始算起的。同理，margin-bottom 是从离底线半个行距的下方开始算起的。
line-height 是可以继承的。父元素不同的行高单位影响子元素的继承。例如：
父元素的行高为 24px 时，子元素直接继承此固定的行高
父元素的行高为 150% 或 1.5em 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承
父元素的行高为 1.5 时，根据子元素的字体大小动态计算出行高值让子元素继承。
JSFiddle 源码
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111429.html
摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。 张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义 行高：两行文字基线之间的距离 为何是基线：基线是定义所有字线的根本 不同字体...
摘要：按照定义来解释，就是两行文字之间基线之间的距离。了解完基线的定义后，我们接着来聊行高。上面我们说过，行高就是两条基线的之间的距离，如下图所示。 1.写在前面 两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高...
摘要：行内元素设置时，不论设置的多大，它的背景永远只跟随文字的大小来渲染，但是行高的大小还是会体现的。行高对背景的渲染起作用行距行高字体大小半行距行高字体大小推荐文章 1:行内元素设置line-height时，不论设置的多大，它的背景永远只跟随文字的大小来渲染，但是行高的大小还是会体现的。 行高对背景的渲染不起作用 2:行内块和块元素，背景颜色会随着line-height的设置来给文字背景...
摘要：的应用大部分时候，我们设置，都是为了垂直居中对齐。然后我们给设置，这样我们就可以重置设置的，又因为保持了内联特性，因此我们可以设置以及产生，从而实现近似垂直居中对齐。 前言 行高，顾名思义是一行文字的高度，而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的，而行框盒子则是由内联盒子组成，因此，行高与内联元素可以说是非常紧密，行高直接决定了内联元...
阅读 3615·2021-09-22 15:15
阅读 3496·2021-08-12 13:24
阅读 1290·2019-08-30 15:53
阅读 1794·2019-08-30 15:43
阅读 1121·2019-08-29 17:04
阅读 2774·2019-08-29 15:08
阅读 1546·2019-08-29 13:13
阅读 3055·2019-08-29 11:06
