談談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代碼

1 .pain_bard{border-radius: 5px;background:#fff;  border: 1px solid #ccc; float: left;word-spacing: -4px; }
2     .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; }
3     .pain_bard a.select{background: #eee;box-shadow: 0 0 5px rgba(0,0,0,0.3) inset; color:#0884c5; }