行高和内联盒的高度区别是？

Question

链接地址：http://www.zhangxinxu.com/wor...

还有文中说内联盒的高度是取最大的ling-height的高度。是怎么理解的呢？

Answer 1

以下是自己对CSS 文本框，行内框，行框，vertical-align的理解终结

line-height属性，也就是行高,指定了块级元素内的/内联元素内单行文本渲染时的行内框(inline-box,内联盒)的高度，一个块内可以有多个内联文本元素或匿名元素，它们可以有各自的line-height属性，一行中的多个行内框共同决定了行框(line-box)的高度-最高行内框的顶部和最低行内框的底部之间的距离就是行框(line-box)的高度，也就是我们看到的一行元素占据的高度。而这个行框(line-box)决定了多行文本之间在垂直方向的排列方式-下一行的行框(line-box)的顶部和上一行的行框(line-box)的底部贴紧。
文本按设置的font-size以及font-family属性构成一个文本框(text-box),默认情况下这个文本框(text-box)的高度和设置的font-size相同,但是在不同的浏览器下可能会有所不同:firefox下和设定的font-size相同，而chrome下会是font-size的1.4倍左右。行内框(inline-box,内联盒)和文本框(text-box)之间的高度差的1/2会被添加到文本框(text-box)的头部和底部,添加的部分就叫做半行间距。
也就是说 行内框(inline-box,内联盒) 是由文本框(text-box)和半行间距共同构成的。

通过图示能更清楚些看到:

那么行内框(inline-box,内联盒)的上下位置又是通过什么决定的呢？
它就是vertical-align属性-没有继承性，只对内联元素以及table-cell元素有效
vertical-align有不同的属性,按参考线的不同可以分成3类:
1 相对baseline的
baseline就是图示中的蓝色线条表示的，对于baseline的具体位置根据font-size以及font-family的不同而不同,基本上对应字体及大小下，小写字母x的底部就是baseline线的位置;对应的属性值有baseline(默认),sub(baseline往下),super(baseline向上),百分比(baseline+行高的百分比)，具体长度值(baseline+指定长度),middle(baseline向上1/2个x-height)。其中提到的x-height就是小写字母x的高度,在CSS中有一个ex的长度单位指的就是x-height，其具体值大约等于0.5em。

2 相对文本框(text-box)上下边的
图示中的绿色上下边,对应的属性值有text-top,text-bottom

3 相对行内框(inline-box,内联盒)上下边的
图示中的红色上下边,对应的属性值有top,bottom

同时要记住重要的一点在一个内联元素的所在的父元素(块级元素)的开头会添加一个宽度为0的匿名字符x,这个看不到的x字符做为以baseline为基准的对齐方式的基准

下面给出一些例子来看看对齐的效果以及对最终行框(line-box)高度的影响

例子1:

vertical-align:text-top; 
line-height: 72px; 
font-size: 36px;

.div-line{
    line-height: 72px;
    font-size: 36px;
}
.span-line-0{
    background-color: #F74A81;
    font-size: 36px;
    vertical-align: text-top;
}

    <div class="div-line" style="margin-top: 10px;">x
        <span class="span-line-0">00X00</span>
        <span class="span-line-0">abcdefhijklmn</span>
        <span class="span-line-0">opqrstuvwxyz</span>
    </div>

最终div的高度是90px:灰色区为行内框(inline-box,内联盒),div构成一个行框(line-box),红色虚线以及红色背景的文字构成文本框(text-box),.span-line-0的vertical-align对齐方式为text-top，那么就和红色虚线的文本框的顶部对齐，红色虚线的行内框的半行间距为(72-36)/2=18px,那么按行框构成的规则，整个行框的高度值为72+18=90px;

例子2:

vertical-align:base-line; 
line-height: 72px; 
font-size: 36px;

        .div-line{
            line-height: 72px;
            font-size: 36px;
        }
        .span-line-0{
            background-color: #F74A81;
            font-size: 36px;
        }

        .span-line-1{
            background-color: #F74A81;
            font-size: 20px;
        }
        .span-line-2{
            background-color: greenyellow;
            font-size: 40px;
        }
        
    <div class="div-line">
        <span class="span-line-0">00X00</span>
        <span class="span-line-1">abcdefhijklmnopqrstuvwxyz</span>
        <span class="span-line-2">abcdefhijklmnopqrstuvwxyz</span>
    </div>

共有3块行内框(inline-box,内联盒)，对齐方式为默认的baseline,要确定baseline的集体位置才能计算出各个内联盒的相对位置，下面提供一个算法,仅供参考:

middle=baseline+0.5*x-height;
x-height=0.5em=0.5*front-size;
=>
middle=baseline+0.25*front-size;
=>
baseline=middle-0.25*front-size;

先middle对齐

匿名字符x行内框的baseline位置为middle点往下9px;
第1个行内框的(00X00)baseline位置为middle点往下9px;
第2个行内框的(abcdefhijklmnopqrstuvwxyz)位置为middle点往下5px;
第3个行内框的(abcdefhijklmnopqrstuvwxyz)位置为middle点往下10px;

接着以匿名字符x的baseline线对齐,
第1个行内框的不动
第2个行内框的向下调整移动4px
第3个行内框的向上调整移动1px

第2个行内框最低
第3个行内框最高

最终相比设定line-height，高出5px，最终的行框高度为72+5=77px;
如果将第1个行内框的(00X00)的font-size位置为18px,按上面的算法最终的行框高度为72+5.5=77.5px;

啰里啰嗦说了那么多，希望对你有帮助......

以上内容参考了Vertical-Align: All You Need To Know

Answer 2

你问题太多我也不知道你到底想问什么
首先标题行盒的高度计算w3c规范中有描述，简单概括就是需要包裹住所有的子盒子具体见 10.8，而内联盒的高度计算方式规范也有在10.6.1 。
第一张图没太看明白你什么意思
中间的问题，在zxx的这篇文章这不是死结论，而是帮你理解line box高度的，在某些情况下这个结论是不对的
第二张图你这样理解，中线间距往下移一个字体中线到基线的距离不就正好等于基线间的距离吗，不过实际上这个图在css中也基本没什么用，css中你需要知道的是'line-height'这个值会对布局产生哪些影响