vertial-align细节小记

示例图

Paste_Image.png

关键点

• baseline简单来说就是图中小写字母i、n、x（下文中称之为单行小写字母）等的下边界
• 倘若一行中文字有大有小，此时baseline的确立是由一个行盒中距离底部最高的单行小写字母的下边界确立的
• 一个行内块元素或是多行的行内元素，其作为一个整体，baseline是由最后一行的单行小写字母下边界决定的
• 在baseline确定后middle的确定是在baseline的基础上加上父盒子字体大小下小写字母x高度的一半，官方说明中指出middle是在baseline的基础上加上1/2的小写字母x的高度，但是这个小写字母x的大小具体是以什么为基准的呢，经过测试，是以父盒子的字体大小为基准的

实例代码

• html:

<div class="box">
    ![](./collection_active.png)
    <span class="big_text">Xx</span>
    <span class="small_text">Xx</span>
    <span class="inline_bolck"><p>Xx</p><p>ixp</p></span>
</div>

• css:

.box {
    background: red;
    font-size: 12px;
}
.big_text {
    font-size: 20px;
}
.inline_bolck {
    display: inline-block;
}
.small_text {
    font-size: 10px;
}
span {
    background: purple;
}
img {
    background: yellow;
}

• 效果：

  
  Paste_Image.png

• 作为对比我们看下只有img的情况：

• html:

<div class="box">
    ![](./collection_active.png)
</div>

• css:

.box {
    background: red;
    font-size: 12px;
}
img {
    background: yellow;
}

• 效果：

  
  Paste_Image.png

.box盒子内没有文本，但是图片距离下边距有一点间距，原因就是没有显示地为.box盒子设置字体大小，其默认情况下继承了父盒子即body的默认字体大小14px，然后再根据14px的大小的单行小写字母下边界确立了baseline，最后因为img默认是inline-block模型，默认对齐方式是vertial-align:baseline，所以得到了上图的显示效果。
这也是我们在消除图片下边间隙是通过设置父盒子的font-size:0来实现的原因。

由于对比情况较多，这里不一一列举代码以及效果，具体可以通过调整示例一的代码得到不同的情况，主要对比场景有：

<div class="box">
    ![](./collection_active.png)
    <span class="small_text">Xx</span>
</div>

将box盒子字体设置成20px，再将span字体设置成10px，不断增大span字体大小但不超过父盒子字体，会发现img距离父盒子的下边距不会发生改变，证明此时baseline是通过较大的字体20px来决定的（因为20px大的单行小写字母距离底部比10px大的单行小写字母距离底部要高）

middle的确定-实验事例：

<div class="box">
        <span>x</span>![](./collection_active.png)<span class="inline_bolck"><p>Xx</p><p>xixp</p></span><span class="big_text">Xx</span><span class="small_text">Xx</span>
</div>

.box {
    background: lightblue;
    font-size: 16px;
}
.big_text {
    font-size: 20px;
}
.inline_bolck {
    display: inline-block;
    font-size: 16px;
}
.small_text {
    font-size: 10px;
}
span {
    background: purple;
}
img {
    background: orange;
        vertical-align: middle;
}
p {
    margin: 0;
}

• 效果：

Paste_Image.png

其中最左边的x的字体大小时通过父盒子box设置的，而右边紫色文本块的字体大小都是有直接设置的，试验中通过修改父盒子box的字体大小，会发现vertial-align：middle的心形块的中线始终和最左边x的中点在同一水平线上，而修改右边文本块的字体大小，并不影响这一对齐，由此可见，行框的middle线是在baseline的基础上加上1/2行框字体大小下小写字母x的高度，而与行框内其他子元素的字体大小无关