这个起源于帮忙解决一个运营页面，这个悲剧啊，页面的布局就是下面这样的。

简单吧，简单不过了，甚至在我们页面中都鄙视这样的布局，但是不从这个角度出发，我们发现这挺怪异。
Firefox，Chrome下挺好，而IE却会在两张图片中间出来一条白色的间隙。
我明明设置了cellpadding=”0” cellspacing=”0” border=”0”，奇怪了…
网上查完，解决方法有二：

1. td img {display: block;}
2. td img {vertical-align: bottom;}

可是这是为什么呢？为什么这样设置就了可以了，这两个方法不就是把元素从inline变成了block，改变了垂直对其方式。
后来慢慢baidu，baidu不行Google…发现vertical-align默认值是baseline。以此引出一个概念：
基线对齐
所谓基线对齐，就是各种inline元素都保持其基线与其父元素的基线是对齐的。例如如果有图片的话，则图片的底端也会贴着父元素的基线。
基线这个东西还要从文字设计开始讲起，MD，这博客要写到神马时候啊。还是看代码吧。

aAg

Aga

仔细看仔细看，看到没看到没，其实图片是和a这个字母的下沿对齐的，小时候学字母的时候就会有这条线，不过也有些小写的字母如gg是会超出基线的。所有大写字母都是底部基线对其的。
这大部分已经说到了上面的问题，既然有基线对齐这回事情，那vertical-align必然和这个相关，一看vertical-align的值：baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）MD，这博客要写到神马时候啊。还是自己看代码吧。

最后：其实非常多有关布局的情况都是和这个有关，写的不够系统，望有高人指点。欢迎参加D2。