最近在看张鑫旭大佬的《css世界》，读到5.2.4  内联元素 line-height 的“大值特性” ，产生了疑惑，

在开发中确实也遇到了同样的问题，深入探究后得出结果，先说结论吧，论证内容有点长，结论：

　　行内元素自身并没有行高这个属性，虽然设置可以设置行高，但是最终作用的地方并不是自身，而是其自身所在的行框盒子上！如果你不知道什么是行框盒子，建议你好好读读张大佬的《css世界》，这里我简单的画一画

如上如所示，我的结论是：

　　内联盒子没有行高这一属性，给它设置line-height，最终是作用在行框盒子上，而行框盒子最终会取内部行高最高的那个作为最终行高，而此行高将在其内部所有内联盒子中生效！

上代码：

<style>

       p{

           line-height: 96px;

       }

       span{

           line-height: 20px;

       }

</style>

<!--------分割线---------->

<p>

        <span>span标签中的文字</span>

</p>

为了让文字换行体现效果，我把浏览器缩窄一些，span标签中的文字放多一点，上述代码页面表现为：

如上图，span的line-height属性确实设置上了，并且覆盖了继承的来自父元素p的line-height:96px;但是从换行来看，span的表现，依然是line-height:96px; !!

张大佬的书中只解释了父盒子的高度问题，简单回顾下：因为幽灵空白节点继承了父元素p的行高，所以撑起了p元素的高，所以整个的高度为96px。按照张大佬的解释理解，

span的行高应该是24px，幽灵空白节点的行高为96px，行高撑起了高度，所以父元素的高度为最高的高度。

但是，这里通过换行我们可以发现span表现的并不是20px,而是96px ！而且通过调试器我们发现，上下调整span的line-height页面根本一点变化都没有，纹丝不动！

这时候小白就要说话了，行内元素的行高设置无效！聪明的你试一下就会发现，行内元素当然是可以设置行高属性的。那这里为什么会设置无效呢？其实当你设置span的行高超过父元素的时候，你就会发现，有意思的现象出现了！

没错，span的行高生效了！

那么问题来了，说不生效吧，比父元素行高大的时候它生效了，说生效吧，小于父元素行高的时候多少都没用，什么情况?问题不急着回答，再看下面一个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

       p{

           line-height: 20px;

       }

       span{

           line-height: 40px;

       }

       em{

        line-height: 80px;

       }

       b{

        line-height: 160px;

       }

    </style>

</head>

<body>

    <p>

        <span>span标签中的文字</span><em>em中的文字</em><b>b中的文字</b>

    </p>

</body>

</html>

高度不用说，按照张大佬得出的大值特性，肯定是160px。那行高呢？各位不妨猜猜最终的表现，

我猜你肯定猜到了，没错，就是这样：

结合上述盒子模型图，在这个例子中应该是这样的

幽灵空白节点继承父元素的行高属性 ，各个内联盒子自身有自身的行高属性，但是这些“行高属性”都不是作用在自身而是作用在如图的行框盒子上，

而行框盒子又反过来让其内的所有内联盒子表现出行高的特性。打个通俗点的比方讲就是，爸爸问自己的儿子们今晚吃啥，儿子们提意见，爸爸其中一个的意见后发出命令，今晚大家都吃这个！

儿子们自己决定不了，但可以提意见，切回行高就是，内联盒子决定不了自己所在行的行高，但是可以告诉行框盒子，我想是这么多！(line-height:***)

最后带来一个小例子，提醒一下各位看官，行框盒子的行高也不是固定，什么意思呢？还是上例的样式（为了方便观看，我为对应元素加上底色，

同时去掉margin和padding的影响），请看：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

       p{

           line-height: 20px;

       }

       span{

           line-height: 40px;

           background-color: red;

       }

       em{

        line-height: 80px;

        background-color: green;

       }

       b{

        line-height: 160px;

        background-color: blue;

       }

    </style>

</head>

<body>

    <p>

        <span>span标签中的文字很长很长很长很长很长很长很长很长很长很长很长很长</span>

        <em>em中的文字很长很长很长很长很长很长很长很长很长很长很长很长</em>

        <b>b中的文字很长很长很长很长很长很长很长很长很长很长很长很长</b>

    </p>

</body>

</html>

调整浏览器的宽度，使换行，效果如下：

就不卖关子，直接说了，这里变成了这样：

一个包含盒子（包含块）p，4个行框盒子，4个行框盒子。

第一个行框盒子里包含了幽灵空白节点+span标签的前部分，

第二个行框盒子包含了幽灵空白节点、span标签的后部分和em标签的前部分，

第三个行框盒子包含了幽灵空白节点、em的后部分和b标签的前部分，

第四个行框盒子包含了幽灵空白节点、b标签的后部分。

四行表现的行高分别是 40px 、80px、160px、160px。

最后的最后来个总结：

1. 行内元素的line-height属性是去设置该元素所在行框盒子的行高，行框盒子取其内部所有内联盒子要求的行高的最大值，定为当前行的行高，所有内联盒子遵守这个最终行高来行事！

2.换行后生成新的行框盒子，新生成的行的行高，重新在当前行包含的内联盒子中选拔最高者定之！

行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释的更多相关文章

  1. html根标签设置font-size为100px，使用rem，body没设置字体大小

    今天使用了rem来写样式,前提是要给html设置font-size:100px;这样在计算比例时相对方便点:结果在将一个span标签设置为display:inline-block;时发现span不能能 ...

  2. 父窗口中获取iframe中的元素

    js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("ifr ...

  3. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. 行内元素为何不能设置margin-top、margin-bottom；padding-top、padding-bottom值

    曾经学过的教程中写明:行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外 ...

  6. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  8. HTML5 结构性标签 行内语义性标签

    结构性标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  9. CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

随机推荐

  1. .NET Core 3.0 中间件 Middleware

    中间件官网文档解释:中间件是一种装配到应用管道以处理请求和响应的软件 每个中间件: 选择是否将请求传递到管道中的下一个组件. 可在管道中的下一个组件前后执行工作. 使用 IApplicationBui ...

  2. Tesseract引擎编译

    1. 工具包下载链接 libtiff 4.09 http://download.osgeo.org/libtiff/tiff-4.0.9.zip leptonica 1.76.0 http://www ...

  3. 第四十章 POSIX条件变量

    条件变量 当一个线程互斥地访问某个变量时,它可能发现在其它线程改变状态之前,它什么也做不了 例如一个线程访问队列时,发现队列为空,它只能等待,只到其它线程将一个节点添加到队列中.这种情况就需要用到条件 ...

  4. C语言I博客作业07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-1/homework/9931 我在这个课程的目标 ...

  5. git log 附加命令归纳

    git查看历史记录的时候查看每次提交的内容差异: git log -p git限制显示的条数 : git log -p -2 [-2] git简单显示每次提交做了哪些改动: git log --sta ...

  6. 关于virtualbox虚拟电脑控制台严重错误解决方法。。。

    今天的我已经泪崩,忙了一天,临近下班的时候,突然发现虚拟机关了,再打开时,提示错误!!! 然后在网上查方法解决完的时候,再打开一看,完了,虚拟机里面的内容全没了...现将解决方法记录如下: 1.打开, ...

  7. C++ 11新标准实现POJ No.1002-487-3279

    487-3279(重复的电话号码查询)(标签:优先队列,哈希表) 题目描述 企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一个容易记住的单词或者短语.例如,你需要给滑铁卢大学 ...

  8. dianFanEditor Web在线编辑器

    个人很喜欢kodexplorer 的在线编辑器.苦于没有加载FTP目录的功能. 索性自己改造了一下,用.NET 做了几个WEB接口,用CEF3做浏览器内核,打包了在线地址做编辑器. 即可加载本地磁盘, ...

  9. 浅谈OI中的底层优化！

    众所周知,OI中其实就是算法竞赛,所以时间复杂度非常重要,一个是否优秀的算法或许就决定了人生,而在大多数情况下,我们想出的算法或许并不那么尽如人意,所以这时候就需要一中神奇的的东西,就是底层优化: 其 ...

  10. Linux初体验--配置网络(CentOS7)

    在安装好虚拟机和操作系统后,一台合格的网络设备当然是要冲浪啊. 一.记下自己的网络配置 二.打开终端,输入命令 三.修改文件 保存后退出(wq). 四.重启网络服务 systemctl restart ...