【CSS】如何清除vertical-align属性产生的中间空隙

在使用display:inline-block这个属性的时候，进行行内并排，往往不会按照你预期的方式进行布局排列。

下面看看这个例子出现的问题：

代码实例：

	


	

		

			我是内容一。
		
		

			我是内容二。
		
		

			我是内容三。
		
		

			我是内容四。
		
	

效果图如下：

本来每个div占宽25%应该把这一行占满，但是并没有，而且第四个div还跑到了第二行，除此之外，它们之间还存在着缝隙。

产生这些缝隙的原因是这中间有些空白字符。那么消除这些空白字符的办法就是给其父元素设置font-size:0。

代码如下所示:

	


	

		

			我是内容一。
		
		

			我是内容二。
		
		

			我是内容三。
		
		

			我是内容四。
		
	

 

效果图如下：

当给父元素设置font-size:0后，发现文字消失了，结果变成了上图的样子。

是由于自身未对文字设置font-size，是继承了父元素的font-size，所以再给子元素赋值font-size就能够得到想要的结果。

代码如下所示：

	


	

		

			我是内容一。
		
		

			我是内容二。
		
		

			我是内容三。
		
		

			我是内容四。
		
	

效果图如下：