.box{显示：内联块；宽度：100px；高度：50px；边框：1px纯红色；}1、适用元素vertical-align适用于行内级元素，即inline、inline-block或inline-table。2、inline和inline-block元素的外边缘和baselineinline元素的外边缘和baselineinline元素的外边缘是由它的line-height决定的。红线：元素的外边缘，即行高的上下边缘。绿线：字体的高度。蓝线：基线。在上图中，左边的那个，文本的行高设置为与字体大小相同的高度。上下两侧的绿线和红线重叠成一条线。中间那个，行高是字体高度的两倍。右边那个，行高是字体高度的一半。inline-block元素的外边缘和基线inline-block元素的外边缘是其margin-box的顶部和底部边缘。红线：元素的外边缘，即margin-box的上下边缘。蓝线：基线。上图从左到右可以看到：一个inline-block元素里面有in-flow内容（一个“C”），一个inline-block元素里面有in-flow内容和overflow:hidden，还有一个inline-block元素不流入内容（但内容区域有高度）。内联块元素的基线取决于该元素是否有流内内容：对于流内内容，内联块元素的基线是正常流中最后一个内容元素的基线（例如左边）。对于最后一个元素，它的基线根据它自己的规则定位。对于流入内容并使用overflow和visible以外的值，基线位于margin-box的底部边缘（例如中间那个）。因此，它与行内块元素的底部边缘相同。如果没有流入内容，基线也位于边距框的底部边缘（例如右侧的那个）。例如：下图中紫色为baseline，两个span都对齐baseline。对比两张图可以看出，随着第一个span元素中内容的增加，基线向下移动。.box{显示：内联块；宽度：100px；高度：50px；边框：1px纯红色；}学者健康
.框{显示：内联块；宽度：100px；高度：50px；边框：1px纯红色；}ScholarandhealthScholarandhealth
【注意】：如果一个元素是浮动的(float:left/right)、绝对定位(position:absolute/fixed)或根元素(html)，则称为流外元素。如果一个元素不是流出元素，则称它为流入元素。3、content-area、inlinebox、lineboxcontent-area：在非替换元素中，是指将元素中每个字符的字号串起来形成的框；在替换元素中，元素的固有高度加上任何边距、边框或填充。inlinebox：每个元素加上leading的content-area。对于非替换元素，元素的行内框的高度等于line-height的值；对于替换元素，元素的行内框的高度等于元素的固有高度加上任何边距、边框或填充。linebox：一行就是一个linebox。linebox的边界是line中inlinebox的最高点和最低点，即linebox的topedge是line中最高的inlinebox的topedge，bottomedge是bottom行中最底部行内框的边缘。linebox的textbox和baselinetextbox可以看作是行内元素，没有任何对齐方式放在linebox内部。文本框的高度等于其父元素的字体大小。因此，文本框刚好包围了行框的未格式??化文本。这个盒子就是下图中用绿线标出的盒子。因为此文本框与基线相关联，所以它会随着基线移动而移动。线框的基线无法定义。linebox的基线放在满足所有条件的地方。绿色：行框的文本框。红色：线框的顶部和底部边缘。蓝色：基线。灰色：文本元素区域。查看行框基线的方法：在行首添加一个字符，如上图添加的“X”。默认情况下它位于基线。行框是发生垂直对齐的区域。行框有基线、文本框以及顶部和底部边缘。如何计算行框高度当一行中只有不可替换的元素，并且这些元素的font-size、line-height和vertical-align都相同时。那么content-area=font-size，line-box的高度=line-height。当一行包含行内元素时，这些元素包括可替换元素和不可替换元素，并且这些元素具有不同的字体大小和行高。它的计算方式如下：内容区域的高度由每个不可替换元素的字体大小以及被替换元素的固有高度和任何填充、边框或边距决定。行距应用于每个元素，一半在顶部，一半在底部。行框的上边缘是行中最高行内盒的上边缘，下边缘是行中最底部行内盒的下边缘。例如：anchor怒字bold
anchor的content-area是128pt，但是他的inlinebox是12pt。假设字体是Helvetica，那么descent:128pt*219/1000=28ptascent:128pt*781/1000=100pthalfleading:(12pt-128pt)/2=-58ptinlineboxtop:100pt-58pt=42ptinlineboxbottom:58pt-28pt=30pt，所以这个内联框的顶部距离基线42pt，底部距离基线30pt。同样，匿名文本angry文本的顶部比基线高10pt，比基线低2pt。所以line-box的高度是44pt：基线以上42pt，基线以下2pt。去掉愤怒的文字，你会发现父元素P的高度没有变化。原因：根据W3C规范：在由inline-level元素组成的块容器元素中，line-height决定了元素内部lineboxes的最小高度。这个最小高度由基线以上的最小高度和基线以下的最小深度组成，就像每个行框都以一个行内框（虚构元素）开始，宽度为零，字体大小和行高为父元素。.我的理解是linebox是基于这个虚构的元素向两边延伸。例如：
anchor中只有锚文本p元素，但是文本的行内框的顶部距基线42pt，底部距基线30pt。因此，linebox的top在baseline上是42pt，linebox的bottom不是在baseline上30pt，而是原虚元素在baseline下的最小深度（即离蓝线的距离到上图中最后一条红线）。因此，即使没有愤怒的文字，基线下方也会有一个最小深度，所以P元素的高度不会改变。注：例子中用于计算Helvetica字体的219和781是修改过的数据，只是为了让数据看起来更好看。实际上，它应该接近225和775。leading=line-height-font-size。一半行距加在文字上方，另一半行距加在文字下方。line-height对可替换元素的行内框没有影响，但当元素的vertical-align值为百分比时它确实有影响。4、Vertical-Align的取值基线：元素的基线在linebox的基线上方。sub：元素的基线移动到linebox基线下方。：元素的基线相对于linebox的基线偏移了与line-height相关联的百分比。：元素的基线相对于linebox的基线偏移绝对长度。middle：元素顶部和底部之间的中点与线盒的基线加上x高度的一半对齐。text-top：元素的上边缘与行框文本框的上边缘对齐。text-bottom：元素的底边与linebox的文本框的底边对齐。top：元素的上边缘与linebox的上边缘对齐。bottom：元素的底边与linebox的底边对齐。5.Vertical-Align的怪异行为LineBox的基线移动例如：div{font-size:16px;行高：1；背景色：#eee；顶部边距：10px；}.tall-box{边框：1px纯红色；宽度：40px；高度：40px；显示：内联块；}.short-box{border:1pxsolidblack;宽度：40px；高度：10px；显示：内联块；}Exg
如果将tall-box的vertical-align改为top，上下图对比可以看到如下图。随着vertical-align从text-top变为top，Exg上移，导致字体高度超过了父div的边框。这是因为行高小于字体高度。如果将第一张图片中父div的line-height改为2，使得Exg的line-height值大于字体原来的高度，就会得到下图。从图中可以看出，红框掉了，父div的高度变高了。这是因为红色框是文本顶部对齐的，所以你可以知道基线在哪里。而基线位置的确定就可以确定Exg和黑盒的位置。行框的上边缘是行中最高元素的上边缘。这时候最高的就是Exg，所以可以看到红框掉了，父元素变高了。Inline-Level元素的底部空隙.box{显示：内联块；}可以看到li元素下面有一个空隙。产生差距的原因：因为列表项在基线上，而基线以下是文本下行的空间。取消间隙的方法：设置li元素vertical-align:middle;在li元素中添加内容。因为内容会偏移基线。参考自：inline-format【翻译】Vertical-Align:AllYouNeedToKnow
