display:inline-block間隙產生的緣由以及解決方案

display-inline-block是讓元素在一行顯示，可是這些元素在html裏面是上下行排列的，因此中間有換行符，因而並排顯示就有了換行符帶來的空隙。那麼如何解決呢？

方案一：將html標籤要display:inline-block 的元素寫在一行。缺點：代碼可讀性差。

方案二：給父元素設置font-size:0,缺點是子元素若是裏面有文字，文字會消失不見，因此又要給子元素設置font-size:0,增長了代碼量。

方案三：給元素設置float:left,缺點高度塌陷，要清楚浮動。

方案四：設置子元素的margin-left爲負值，可是元素之間的間隙大小是根據上下文的字體大小肯定的，而每一個瀏覽器的換行空隙大小不一樣，若是font-szie：16px,chrome空隙爲8px,火狐空隙爲4px.因此這個方法不通用。

方案五：設置父元素 display:table;word-spacing:-1em;目前這個方法能夠完美解決，且兼容其餘瀏覽器。