谈谈inline-block

在做网页的时候，我们肯定会用到浮动（float）来达到达到我们想要的效果！但是有时候用display这个里面的inline-block来代替浮动（float），比如说下面代码用inline-block会更好

				<span class="pain_bard">
					<a value="day">今日发布</a>
					<a value="my_renli">我中心认领</a>
					<a value="my_dengji" style="border:none;">我中心登记</a>
				</span>

　　　css样式

	.pain_bard{border-radius: 5px;background:#fff;  border: 1px solid #ccc; float: left; }
	.pain_bard a{cursor: pointer;padding: 0 5px; border-right: 1px solid #ccc;line-height: 27px; height: 27px;display: inline-block;*display: inline; zoom:1; }
	.pain_bard a.select{background: #eee;box-shadow: 0 0 5px rgba(0,0,0,0.3) inset; color:#0884c5; }

　　但是在运行的时候发现，在第二个和第三个a表态添加select样式时候，左边有短空白没有填充，后来找到原因是：

inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。

所以在a元素的父辈元素pain_bard添加一个css样式word-spacing: -4px

完整css代码

.pain_bard{border-radius: 5px;background:#fff;  border: 1px solid #ccc; float: left;word-spacing: -4px; }
    .pain_bard a{cursor: pointer;padding: 0 5px; border-right: 1px solid #ccc;line-height: 27px; height: 27px;display: inline-block;*display: inline; zoom:1; }
    .pain_bard a.select{background: #eee;box-shadow: 0 0 5px rgba(0,0,0,0.3) inset; color:#0884c5; }