vertical-align 和 line-height关系的一点感想

本篇主要理性的认识一下感性的line-height 与vertical-align之间的纠缠关系
你可以理解为滚床单 如果这样理解 那床要大 而且还经常在床边的地毯上翻滚..
line-height 很任性 而vertical-align却很慈爱 [早离早好啊你]

1.

内的line-height值为默认

 lang="en">

     charset="UTF-8">
    
    


    

        xxxxxXXXeee123  //eee为行内隐匿字符节点的显示表示 i元素内的数字始终不谈加任何css 以示对比
    
    

现在的网页表现为:(这里只考虑chrome > 50)

这个时候因为基线对齐而inline-block的span盒子会撑开行高 所以line-height达到了186 PS:看到没有 行高现在已经开始在'作'了 因为是初夜 所以还比较低调
多说下为什么会这么表现: 盒子本身的baseline为下边缘 但是如果盒子内有文字 那盒子的baseline会变为内部文字的baseline 而文字的baseline为字母'x'的下边缘 所以带有文字的盒子的下边缘即为盒子内文字'x'的下边缘 而因为此时所有元素是baseline对齐 所以呈现出比翼双飞的局面..

第一步:
给第一个span添加vertical-align 为bottom 局部代码为:

span:nth-child(1){ vertical-align: bottom;  }

现在的页面表现为:

此时第一个span由于vertical-align为bottom 故与他的盒子下边缘与第二个span盒子的下边缘对齐了
!!但是 从第一副画面可以看到 本来第二个span上面是有大大的空间的哦~ 那第一个span掉下来对齐 为什么上面没有了呢??
个人理解 因为HTML是默认从左上开始渲染的 那现在底部对齐 上面没东西了 HTML就会自作主张 把上部的空间砍掉了! 以至于p元素的背景色(pink)变矮了 那砍掉了什么呢? 这时候可以看到控制台显示的line-height高度 变成了102了哦 原来砍掉的是84的line-height高度 从旁观者来看 md 行高说都不说就自己搞掉了自己一小半 wtf..
ok 少了也就罢了 那基线是如何变化的呢 不用问 直接从原来的中间变成了现在的上方 也就是数字123的下边缘位置 .. 我擦 连基线位置都改变了 line-height 你就继续'作'吧

第二步:
给第二个span添加vertical-align 为top 局部代码为:

span:nth-child(2){ vertical-align: top;  }

页面表现为:..

!有人说 第二个span搞毛啊 本来经过第一步 第二个span的上边缘不是已经和第一个span的上边缘对齐了嘛 那还top个毛啊
不过 她们还真真的玩出了花样 (比69式更离奇)
从图上可以看出 这次他们确实是底部对齐了(原来也是好嘛) 问题是 他们竟又把上面的行高给撑了起来!!(..) 而又把下面的行高给砍了去 这次加上的行高与第一步砍掉的还一模一样 最直观的表示是 eee123又掉下来了.. 也就是说 表征为line-height(行高)的变化使得基线再一次被玩[有种被扇耳光的感觉].. OK 继续

第三步:
给第一个xxx添加vertical-align 为top 局部代码为:

strong{ vertical-align: top; }

页面表现为:

到了这一步 事情就简单多了 从图中可知 现在的基线接近于p元素的底边缘 而整个的大盒子顶端在span的顶部 所以在xxx设置vertical-align:top后 xxx的顶部对齐了大盒子的顶部

第四步:
给第一个XXX添加vertical-align 为bottom 局部代码为:

em{ vertical-align: bottom;  }

页面表现为:

所有元素纹丝未动..
[前方高能]
更改em的显示水平

em{ vertical-align: middle;  }

页面表现为:

注意 middle对齐竟然比bottom更往下了! 而baseline与bottom页面表现一致...
这是由于 虽然页面表现 下部的line-height没有了 但在vertical-align的心里 下部的line-height还是一直存在的 用张鑫旭的话说'心心念念着他的小伙伴 55555'...
这里上一张图 大概就能明白意思了

上面的图 是页面原始状态下 只调整em元素的vertical-align值为middle的结果 图中清晰显示了middle对齐后em元素的位置
既然middle对齐的是整个大盒子的行高中心位置往下偏移1/2字体的高度 那就说明 在上上张图里 下部去掉的line-height在vertical-align的对齐里还是考虑的
为什么非要考虑呢 我想了想 行高~=content area+上下间距 而间距这东西应该每个元素都有 如果这里不管下面的间距了(下部的line-height) 那别的地方是不是也可以不管呢----当然不行 因为虽然这样看起来会难以理解一些 但是如果没有间距 那整个页面会更加的难以布局和理解.这就做到了在HTML布局中即考虑到整体的可操作性 又保证整体页面的紧凑 不至于到处是line-height折腾出的空白.
在打字的同时 隐隐约约可以感到为什么各种标准制定的举步维艰.向css标准制定组织致敬.