一、line-height的定义

line-height，行高，是指文本行基线间的垂直距离。

1.    什么是基线？

一般而言，一个文本行一共有四条线，从上到下依次为顶线、中线、基线、底线；在英文中，基线为小写 x 字母下边缘所在的那条线。如下图所示：

注意，基线的位置与字体有关，不同的字体基线的位置有偏差。

2.    行高控制行间距。

在多行文本中，第一行文本根据文本的字体和字号显示，并因此确定了第一行的基线；在此基础上，根据line-height的值，确定第二行基线的所在位置，在那个位置之上显示第二行文本。

在这个机制之下，可以推断出line-height控制行间距，行间距是文本行之间超出字体大小的额外空间。换句话说，line-height与font-size之差就是行间距；如果line-height的值小于font-size，也就是说行间距为负，就会导致后一行文本与前一行文本重叠。

二、行内框与行框

1.    内容区（content area）：顶线与底线包围的区域，其高度与字体和字号相关（可粗略等于font-size的值），与行高没有半毛钱关系。

2.    行内框（inline boxes）：每个行内元素都会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（比如line-height），行内框等于内容区。

（然而line-height无处不在）设定line-height之后，将半行距【（行高-字体大小）/2】分别增加到内容区的上下两边，得到一个行内框。

3.    行框（line boxes）：一旦给定的某一行已经生成了所有的行内框，行框的构造就会考虑这些行内框，使行框的高度足以包含最高行内框的顶端和最低行内框的底端。

4.    包含框（containing box）：由一行一行的行框组成。

请看如下代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>行内框的高度</title>

         <style>

             p {

                 font-size: 32px;

                 background-color: orange;

                 width: 500px;

                 margin: 20px auto 50px auto;

             }

             .p1 {

                 line-height: normal;

             }

             .p2 {

                 line-height: 20px;

             }

             .p3 {

                 line-height: 0;

             }

             ul {

                 font-size: 16px;

                 line-height: 1.5;

                 background-color: cyan;

                 width: 500px;

                 margin: 50px auto;

             }

             ul>li {

                 padding: 10px;

             }

         </style>

     </head>

     <body>

         <div>

             <p class="p1">这是第一个段落，行高为normal。</p>

             <p class="p2">这是第二个段落，行高为20px。</p>

             <p class="p3">这是第三个段落，行高为0。</p>

         </div>

         <div>

             <ul>

                 <li>背景颜色为什么会有这些变化？</li>

                 <li>font-size为32px，内容区的高度也就是32px；而line-height为10px，那么半行距就是-11px；

                 将-11px的半行距分别加到内容区的上下部分，从而行内框的高度就变成了10px；行框的高度也相应为10px。</li>

                 <li>当line-height为0，那么半行距就是-16px；

                 将-16px的半行距分别加到内容区的上下部分，从而行内框的高度变成0；行框的高度也相应为0。</li>

                 <li>于是，我们惊奇地发现，在文本行中，line-height决定了行内框的高度，以此为基准确定了行框的高度；因此，行内（文本）元素的高度是由line-height决定的，并不是由元素中的文本撑开的。</li>

             </ul>

         </div>

     </body>

 </html>

结论：在文本行中，line-height决定了行内框的高度，以此为基准确定了行框的高度；因此，行内（文本）元素的高度是由line-height决定的，并不是由元素中的文本撑开的。

（仅考虑文本的情况，行高=行内框高度=内容区+行间距）

好了，行内框的高度弄清楚了，行高是决定行内框高度的唯一因素，那么行内框的宽度又是怎么确定的呢？

毕竟，行框的构造不仅要考虑最高行内框的顶端和最低行内框的底端，也是要考虑最左边行内框的左端和最后边行内框的右端的吧。

在盒子模型中，影响盒子宽度的有内容区的width+padding+border+margin，我们依次来看。

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>行内框的宽度</title>

         <style>

             p {

                 font-size: 20px;

                 line-height: 1.5;

                 background-color: orange;

                 width: 500px;

                 margin: 50px auto;

                 padding: 20px;

             }

             span {

                 background-color: red;

             }

             .p1 span {

                 margin: 30px;

             }

             .p2 span {

                 margin: 30px;

                 border: 30px solid green;

             }

             .p3 span {

                 margin: 30px;

                 border: 30px solid green;

                 padding: 30px;

             }

         </style>

     </head>

     <body>

         <div>

             <p class="p1"><span>这是</span>第一个段落，红色区域增加了一个margin属性，值为30px；可以明显看到，只有水平方向上的外边距增加了行内框的宽度，而垂直方向上的外边距没有增加行内框的高度。</p>

             <p class="p2"><span>这是</span>第二个段落，增加了一个30px宽的边框；可以明显看到，只有水平方向上的边框增加了行内框的宽度，而垂直方向上的边框没有增加行内框的高度。</p>

             <p class="p3"><span>这是</span>第三个段落，增加了一个padding属性，值为30px；可以明显看到，只有水平方向上的内边距增加了行内框的宽度，而垂直方向上的内边距没有增加行内框的高度。</p>

         </div>

     </body>

 </html>

结论：

行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整行内框的水平间距；但是，垂直内边距、边框和外边距不影响行内框的高度。

三、line-height属性的值

1.    normal；不同的浏览器有不同的默认值，且与字体有关，正因为如此，一般会在body元素中reset。

2.    number；根据当前元素font-size的值计算。

3.    percentage和em。

下面通过一个例子来说明用number、percentage和em的区别：

假设父元素的font-size为20px，line-height为1.5；子元素的font-size为14px；在继承时，子元素会继承缩放因子1.5，于是子元素的行高为14*1.5=21px。

假设父元素的font-size为20px，line-height为150%或者1.5em；子元素的font-size为14px；在继承时，子元素会继承20*1.5=30px，于是子元素的行高为30。

简单比较可以发现，使用percentage/em时，继承的行高是一个计算数值（而且是一个绝对数值，不可变），而使用number时，继承的是一个缩放因子，使子元素能够根据自己的字体大小去计算它的行高；很明显：

设置line-height时使用number灵活性更高。

四、图像的行内框

以上，我们在讨论line-height的时候仅考虑纯文本，现在我们来看看图文混合的情况。

直接上图，如下：

我们来分析一下：

没有任何标签包含的文本，称为“匿名文本元素”，它们有自己的行内框；

图像自身有height，上图中的图像还有padding、border、margin，可以明显看出，图像的行内框高度=height+padding+border+margin；

行框应当包含这一行中最高行内框的顶端（在这里就是图像的上外边界）和最低行内框的底端（在这里就是文本的行内框底端）；

由于段落的包含框是由它里面所有的行框组成的，这里只有一个行框，这个这个行框就是这个段落的包含框。

总结：文本元素行内框的高度是由line-height决定的，图像元素的行内框高度是它自己的盒子（height+padding+border+margin）决定的。

CSS line-height与行内框的更多相关文章

  1. * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

  2. CSS行内框（内联元素）

    行内框在一行中水平布置.可以使用水平内边距.边框和外边距调整它们的间距.但是,垂直内边距.边框和外边距不影响行内框的高度.由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的 ...

  3. （1-1）line-height的定义和行内框盒子模型

    (1-1)line-height的定义和与行内框盒子模型的关系 一.line-height的定义 line-height的定义: 行高,又称为两基线的距离.默认基线对齐(因为CSS所有*线:总之就是各 ...

  4. css变换transform 以及 行内元素的一些说明

    变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...

  5. css 块状元素与行内元素(内联元素)的理解

    块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...

  6. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  7. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

  8. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  9. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. Windows下CURL扩展无效之终极解决办法。

    本地开发环境使用WAMP快速搭建,在使用PHP的CURL时可能会存在无法载入情况,这里提供终极解决方法. 1.在php.ini配置文件中启用 php_curll.dll 扩展: (环境已经自动附带 l ...

  2. BZOJ2806_Cheat

    Ctsc2012的题目.做完感觉自己瞬间变高富帅了. 不过回想其实也觉得不难,想到用单调队列就很简单了,还有二分= =.呵 对于给出的一篇文章,如果你们将它分成若干段,并在所有长度不小于L的片段在字典 ...

  3. （2）YARN的工作流程

    Writing YARN Applications 文档中的启动过程: Application submission client向Yarn ResourceManager提交一个Applicatio ...

  4. 解决MySQL复制出错 Last_SQL_Errno:1146

    背景:我们在做数据迁移或者拆分的时候,使用Tablespace transcation 这种解决方案时,很有可能就会遇到 从库复制出错,报: Last_SQL_Errno: 1146 那么具体错误内容 ...

  5. 【BZOJ1048】分割矩阵（记忆化搜索，动态规划）

    [BZOJ1048]分割矩阵(记忆化搜索,动态规划) 题面 BZOJ 洛谷 题解 一个很简单的\(dp\),写成记忆化搜索的形式的挺不错的. #include<iostream> #inc ...

  6. 破解PostgresSQL登录的6种方法

      第一种方式Hydra: Hydra通常是首选工具,它可以对50多种协议执行快速字典暴力攻击,包括telnet,postgres,http,https,smb服务和各种数据库等.现在需要选择一个字典 ...

  7. 《剑指offer》— JavaScript（15）反转链表

    反转链表 题目描述 输入一个链表,反转链表后,输出链表的所有元素. *** 思路 (本题链表默认无头结点) pHead为当前结点,如果当前结点为空的话,直接返回: pHead为当前结点,pre为当前结 ...

  8. getopt_long

    http://blog.csdn.net/lanyan822/article/details/7692013 在程序中难免需要使用命令行选项,可以选择自己解析命令行选项,但是有现成的,何必再造轮子.下 ...

  9. 《剑指offer》面试题45 圆圈中最后剩下的数字(Java版本）

    引言 这道题网上的讲解都是直接抄书,没意思,所以想自己写一写,补充一下,便于自己理解.另外,大家都忽略了经典解法,虽然这种解法效率不及第二种,但是我觉得在项目当中阅读性其实很重要,牺牲一点点效率保证代 ...

  10. asp.net webapi http请求生命周期

    先附上webapi http生命周期图. 原始的图片地址为:https://www.asp.net/media/4071077/aspnet-web-api-poster.pdf