vertical-align 和 line-height

这里需要解决如下几个问题：

1.vertical-align只对内联元素有效？inline和inline-block都可以用吗？

2.两个相邻的元素同时使用vertical-align的时候为什么会失效？

3.如何利用vertical-align 和 line-height的关系呢？

 

1.1 vertical-align只对内联元素（inline elment）有效？

首先，w3c对它的定义是：

“vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”

答案不明而喻。

 

1.2 inline和inline-block都可以用吗？

我以为我理解了，然而并不是，来做个试验看看。

html结构：

<div class="div1">
    <span class="span1">inline</span>
    <span class="span2">inline</span> baseline
</div>
<div class="div2">
    <span class="span3">inline-block</span>
    <span class="span4">inline</span> baseline
</div>
<div class="div3">
    <span class="span5">inline</span>
    <span class="span6">inline-block</span> baseline
</div>
<div class="div4">
    <span class="span7">inline-block</span>
    <span class="span8">inline-block</span> baseline
</div>

虽然看上去不明显，但是据我观察vertical在inline 和inline-block上都起了作用。

 

2.两个相邻的元素同时使用vertical-align的时候为什么会失效？

出现这种情况,通常是行内有两个行内元素，然后第一个行内元素设置了vertical-align，影响了整个行的baseline，第二个元素会在这个基础上在进行定位，导致了两个元素的高低无法对齐，最近用第二个元素用vertical-align：tap来解决这个问题。

3.如何利用vertical-align 和 line-height的关系呢？

要问他俩有啥关系，你需要去看看张鑫旭的几篇文章：

css行高line-height的一些深入理解及应用：

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

我对CSS vertical-align的一些理解与认识（一）

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

CSS vertical-align的深入理解(二)之text-top篇：

http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/

CSS深入理解vertical-align和line-height的基友关系：

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/