inline-block元素的一些坑

当年刚知道CSS display有 inline-block 这个神奇的属性的时候，感觉碉堡了，以为从此不用float了，什么div、p，只要 display: inline-block 就在一行上了。直到想用它装装逼的时候，才发现自己图样图森破，只能用一句话形容，当时我就懵逼了。。

---

莫名其妙的元素间隔

;;} 如此粗暴的reset方式。还是看个例子吧：

html：

<div id="text">
    <p>hahah</p>
    <p>hahhaha</p>
</div>

css：

#text p { display: inline-block; padding: 10px; background-color: red; color: #fff;}

显示：

两个inline-block的p出现了间隔。

对于其他的inline-block元素也是一样，比如img：

左右和上下都出现了间距。

那如何去掉他们呢。方法有很多：参见张鑫旭大大的博文：去除inline-block元素间间距的N种方法。

我比较常用的 font-size:0 以及写的时候整成一行。。。orz

莫名其妙的对不齐

看下面的代码:

html:

<div id="img-text">
    <p class="bg-img"></p>
    <p class="words">wordswords</p>
</div>

css:

#img-text p { display: inline-block; }
#img-text .words { width: 100px; height: 100px; background-color: red; color: #fff; }
#img-text .bg-img { width: 100px; height: 100px; background-image: url(img/3.jpg); }

效果:

我勒个擦，为什么不能好好的排在一行，图上去了，文字下垂了。。。（我这里用的背景图，使用img标签也是一样的，写背景图主要是因为切图的时候好多都是以背景图出现的。）

解决方法也很简单，给图片或者背景设置 vertical-align: top 即可。

齐了！！！

其实对于其中的原理我也不是很清楚。在MDN上查了一下关于  vertical-align  的内容， vertical-align 适用于行内元素（inline）和表格单元格（table-cell）元素。所以就不要在div这些里面用它了。

再看它的取值，一大坨，不过大多数的取值有一个共性：那就是都是以父元素的基线为标准的。

问题来了父元素的基线是什么鬼。。。

基线大概就是以前上学时写拼音或者英语的四线格子的第三条线。。恩，大概是。

我给父元素加了几个字：

你会发现图片的底大概就在“我是父元素字体”这几个字的3/4处，img默认的vertical-align就是baseline。

然后我们看一下vertical-align取值top的时候是什么意思：

元素及其后代的顶端与整行的顶端对齐

很明了，与整行的顶端对齐，就是这个样子：

不过图片底部还是与父元素字体的大概3/4处对齐。

网上还有说设置为text-bottom神马的，不过我试验都是没有对齐的。

其实，啰嗦这么多，一个float就可以搞定。

而且，看他们贴的多近。

[2015-8-31更新]

张鑫旭大大最近又更新了一篇长文, 我觉得大家可以直接去看这一篇了, 从理论到应用:

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