IFC布局规则：在行内格式化上下文中，框一个接一个水平放置，从包含块的顶部开始这些框之间的水平边距、边框和填充均有效盒子可以以不同的方式垂直对齐：在它们的底部或顶部，或者在它们内部文本的基线处。线框。包含来自同一行的框的矩形区域称为行框。)linebox的宽度由containingblock和float决定。一般来说，linebox的宽度等于containingblock两侧的宽度。但是，可以在包含块和行框的边缘之间插入浮动。如果有浮动，那么线框的宽度会比没有浮动的小。linebox的高度由line-height决定，linebox的高度是不一样的（比如只包含文字的linebox高度和包含图片的linebox高度之间）linebox的盒子的高度可以容纳它包含的所有盒子。当框的高度小于行框的高度时（例如，如果框是基线对齐的），框的垂直对齐方式由vertical-align属性决定。当一行的行内级框的总宽度小于它们所在行框的宽度时，它们在行框中的水平分布由text-align属性决定。如果这个属性的值为justify，用户代理可以拉伸行中的空白和字（间距）行框和浮动、垂直对齐、文本对齐的内联框（不包括inline-table和inline-block框）box(inlinebox)内联框是一个（特殊的）内联级框，其内容参与其包含的内联格式化上下文。当一个inlinebox超过一个linebox的宽度时，它会被拆分成若干个box，这些box会分布在多个linebox中。如果一个inline-block不能被拆分（例如，如果inlinebox包含单个字符，或者语言特定的分词规则不允许在inlinebox中拆分，或者如果inlinebox受制于一个白色值nowrap或pre-space)，则行内框将从行框溢出。当一个inlinebox被拆分时，margin,border和padding将不会在拆分发生的地方（或者在任何拆分处，如果有多个地方）可视化双向文本处理。当一个内联格式化上下文中的一个内联级内容需要被保持（hold）时，一个行框被创建。没有文本的内联元素，保留的空白，边距，填充或边框非零，其他流入内容（例如，图片，内联块或内联表格），并且不使用保留的换行符结束行框必须被视为一个0高度的linebox，为了确定它里面所有元素的位置，而在其他时候（为了任何其他目的）它必须被当作不存在inlinebox和linebreak，overflowlineheight(line-height)如图所示，我们知道在CSS中，line-height不是相邻文本行之间的上一行基线和下一行基线的距离，而是行框的高度，即距离相邻文本行之间距底线的距离原文链接：DeepdiveCSS:fontmetrics,line-heightandvertical-alignline-heightandreplaceableelements,non-replaceableelementsandvertical-align例1中的line-height值决定linebox的高度，但实际上，它由内容区域和垂直间距决定。line-height=contentarea+verticalspacing注意contentarea不等于font-size。只有simsun（宋体）两者是相等的。通过上面的几个例子，可以得出以下结论：在计算linebox中每个inline-levelbox的高度时，对于可替换元素、inline-block元素和inline-table元素，这个值就是其margin的高度盒子;对于内联框，这个值其line-height内联水平框根据其vertical-align属性垂直对齐。如果它们是顶部或底部对齐的，则它们必须对齐以使行框高度最小化。如果这样的盒子足够高，有多种解决方案，而CSS2.1并没有定义lineboxbaseline的位置。行框高度是最高框的顶部和最低框的底部之间的距离。空的内联元素生成空的内联框，这些框仍然有边距、填充、边框和行高，因此会影响这些计算，就像带有内容的元一样相同行高的属性值描述的是默认属性值normal。它遵循用户的浏览器并与字体大小相关联。一般来说，正常值接近line-height:1.2number是根据当前元素的font-size计算的length使用具体的长度值作为行高值%使用百分比值作为行高值，以及是相对于设置了line-height属性的元素的font-size大小计算的。在行高值中，继承的不是line-height:150%，而是font-size:16px和line-height:150%的行高值24px；line-height和number值是number中的行高值，line-height会根据当前元素的font-size计算高度，并可以实现相应的缩放。所以一般建议使用数值行高的属性值。参考线高和图片线高和图片在例子1中，我们知道图片是基于基线对齐的，所以线高影响的是文字的高度，而不是图片的高度。在示例2中，我们放置了一个图像并在父容器中使用了text-align:center。图片受到影响是因为strut对于内容由行内级元素组成的块容器元素，'line-height'指定了元素内行框的最小高度。这个最小高度包括基线以上的最小高度和基线以下的最小深度，因为每个行框都以一个0宽度的行内框开始，元素的字体和行高属性开始。我们称这个假想的盒子为“strut”（这个名字的灵感来自于TeX）。下面几个例子是去除图片空隙的解决方案，分别是：图片展示：块状图片vertical-align:底部父元素设置line-height:0原因是当line-height:0时，linebox的基线会向上移动。行高的实际应用实现了多行文字的水平和垂直居中。默认情况下，inline、inline-block和table-cell可以使用vertical-align值描述长度将框升高（正值）或降低（负值）该距离。'0cm'的值表示将框升高（正值）或降低（负值）该距离（'line-height'值的百分比）与'baseline'相同的百分比。对于topinline/inline-block元素，“0%”值与“基线”的含义相同：元素的顶部与整行的顶部对齐，对于表格单元格元素：单元格的顶部填充边缘isalignedwiththetopofthetablerowforbottomminline/inline-blockelements：元素的底部与整行的底部对齐，table-cell元素：单元格的底部填充边缘与底部对齐表行基线将框的基线与父框的基线对齐。如果盒子没有基线，则将底部边距与父级的基线对齐。Middle将框的垂直中点与父级的基线加上父级的1/2x高度对齐。text-top将框的Aligntop与父级内容区域（contentarea）的顶部对齐text-bottom将框的底部与父级内容区域（contentarea）的底部对齐sub将框的基线降低到合适的位置作为父框的下标（该值不影响元素文本的字号）super将框的基线提升到合适的位置作为父框的上标（该值不影响元素文本的字号elementtext)invalue/percentagevalues其中，vertical-align可以使用负值，百分比值的增减对应line-height值，去除图片中的空隙。除了上面的，还包括：imagevertical-align:top,vertical-align:当middleline-height为number,font-size:0在table-cell中时，padding会填充高度如果高度不够。vertical-align:middleverticalcenter这个例子也是使用了父元素font-size:0，图片的垂直中心点会上移，与容器的垂直中心点重合，但是这个方法是有缺陷的，因为后面如果需要插入问题，不会显示vertical-align:middle和verticalcentered修改版这里，我们在图片后面插入了一个空span，并设置为vertical-align:middle，两者都是向下偏移的，并且那么垂直中心点重合vertical-align:text-bottom和表情图片文字对齐示例1，基线对齐表情会略高于文本示例2，底部对齐容易受到其他内联元素的影响。比如例3中插入vertical-align:top图片时，中间需要注意图片的大小。如果图片过大，图片相对于文字会下沉，在IE6/7中存在兼容性问题。在示例4中，text-bottom是更合适的用法，因为它不受行高和其他行内元素的影响。vertical-align：text-bottom和baseline在例1中，空白区域较大的原因是图片和X与parent内容区域底部对齐，line-height:250px；底部的空白区域是X的下边距。在示例2中，图片和X都是vertical-align:top，即与parent的内容区域顶部对齐。此时图片后面的正常文字就是line-height:250px的文字，图片下方的空白就相当于文字的下边距vertical-align和line-height两端对齐的效果任何数量的图片都没有完成。在上面的例子中，最后一行图片的间距明显大于图片中的默认间距。为什么是这样？下面看一个例子来解释一下例子1中大空格的例子，我们定义了一个空的inline-blockbox和一个带字符的inline-blockbox，第一个框的底边与第二个框的基线对齐box，也就是空的inline-blockbox的底边是它的基线。例2中，我们设置了line-height:0，此时一个高度为0的inline-block，有一个字符有一个高度，所以它的半间距等于负数字符/2，即inline-block将下沉1/2个字符，框的上边缘在字符的中心点。在CSS标准中，是这样写的：'inline-block'（框）的基线是它的最后一个常规流。linebox的baseline，除非没有in-flowlinebox或者它的'overflow'属性没有计算为'visible'，那么baseline就是bottommargin边，所以gap大的原因是图像按基线对齐，当line-height:0时，字符X会下沉1/2，这里多余的空间是基线高度的1/2。修复方法：父容器line-height:0，最后一个空的inline-block插入一个字符，这个时候空隙就会消失elementvertical-topelementvertical-bottom任意数量的图片对齐图片两端的效果应该是注意，如果空的inline-block元素使用了vertical-align:bottom，那么元素的底部是和整个linebox的底部对齐的，也就是说需要保证vertical-align设置为每个单独的元素：bottomvertical-alignandIE6/7在IE6/7下使用vertical-align图形整合，图片上下空白相等，但现代浏览器不太一样解决方案：图片后面的文字被内联阻塞并且垂直对齐实例不固定。图像或多行文本垂直居中。主要元素是行内阻塞的。给这两个元素添加一个宽度为0，高度为100%的辅助元素vertical对齐：中间
