display:inline-block引发的间隙思考

一、导火线

没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，所以名义上firefox是支持display:inline-block的，除此之外，伟大的chrome、Opera、Safari都能很好地支持。尽管如此，依然还是可以通过hack的手段让ie6、7两位难兄难弟变得温顺，比如像这样：

•  
 
•  
 
•  
•  
 
•  
 
•  

<ul class="demo01">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

代码laycode - v1.1

.demo01{width:327px; margin:0 auto;}
.demo01 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999;}

1. 1
2. 2
3. 3

代码laycode - v1.1

需要解释的是，display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。但事情远远没有结束，这个家伙面临多项后事需要您来处理，比如会默认有外边距(ie6、7除外)。而在这一问题之前，你也许需要放松一下，来看看下面这样一个现象。

二、是什么引发了间隙

上面提到，尽管inline-block默认会存在间隙，那么当我们试图对其中的某一个元素单独设置margin-bottom或者padding-bottom时（当然你也可以试着设置margin-top或者padding-top），它会呈现以下模型：

这意味着什么？ 我们可以借助vertical-align:top;这个属性来消除垂直间隙。

如此多奇异性让我们对css充满着好奇与不解，也许正因为如此才让浮动式布局成为主流。在文中的第一部分提到：inline-block允许空格，这是否又意味着什么？在一番剖析之后，我们惊奇地得出了答案：罪魁祸首是包括换行在内的空白符。

于是我们立马消除空格、换行等家伙，结果验证了这种推断的正确性。但这并不是好的解决方案，因为在复杂的html组合体之间，我们很难避免出现换行之类的空格。解铃还需系铃人，css引发的现象，理应由css本身来解决不是吗。

三、最终的统一

也许?嗦得太多不一定是好事，那么干脆看下我们所需要的最终模型吧！

•  
 
•  
 
•  
•  
 
•  
 
•  

.demo02{width:306px; margin:0 auto; font-size:0;}
.demo02 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top; font-size:12px;}

1. 1
2. 2
3. 3

代码laycode - v1.1

让这一问题得到握手的，是font-size:0; 他的作用便是让多余的空白符消失，当然这会造成所有子元素的文本都一同消失，因此你需要再在子元素加一个font-size:12px。