首页 > 代码库 > 基线概念

基线概念

 1、基线、底线、顶线、中线


技术分享


注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。<br/>

2、内容区
内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。

3、行高、行距

技术分享



**行高(line-height):**包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高。一般情况下,也可以认为是相邻文本行基线间的距离。

**行距:**指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然,我更愿意认为是(上文本行行高-内容区高度)/2+(下文本行行高-内容区高度)/2。

4、行内框

技术分享

行内框是一个浏览器渲染模型中的一个概念,无法显示出来,但是它又确实存在,它的高度就是行高指定的高度。

基线概念