最近做移動端頁面時，經常會用到inline-block元素來布局，但無可避免都會遇到乙個問題，就是inline-block元素之間的間隙。這些間隙會導致一些布局上的問題，需要把間隙去掉。對於inline-block元素及去掉間隙的方法，在這裡做乙個簡單的總結。
inline-block 即內聯塊,在css的元素分類中可以分成三種：行內元素或者內聯元素、塊級元素、以及內聯塊元素。
內聯塊元素具有了內聯元素以及塊級元素的特性：（1）元素之間可以水平排列 （2）可以當做乙個塊級元素來設定各種的屬性，例如：width、height、padding等。
例子1：定義乙個內聯元素span為inline-block元素
我是乙個spanspan>我是乙個spanspan>
我是乙個spanspan>
我是乙個spanspan>
div>
#demo span
效果圖：
對於內聯元素(inline element)，所有主流瀏覽器都支援直接設定display 的value值為inline-block來將其定義為內聯塊。
ie7及以下瀏覽器對塊級元素(block element)的支援並不完全，它們只支援用display:inline-block去定義乙個inline level的元素為內聯塊。
由於ie7及以下瀏覽器支援直接將inline level元素設定為內聯塊，所以我們可以變通實現，先將block level元素設定為inline，然後再去觸發該元素的haslayout，使其擁有和inline-block相似的特性。可以這樣寫：
例子2：
我是乙個divdiv>
我是乙個divdiv>
我是乙個divdiv>
我是乙個divdiv>
div>
#demo div
ie7及以下瀏覽器：block level元素轉換為inline-block，在ie7及以下瀏覽器下元素間不出現間隙；inline level元素轉換為inline-block，在ie7及以下瀏覽器下元素間出現間隙；緊跟block level轉換為inline-block的元素之後有個inline level轉換為inline-block的元素，在ie7及以下瀏覽器下這倆元素間不出現間隙；緊跟inline level轉換為inline-block的元素之後有個block level轉換為inline-block的元素，在ie7及以下瀏覽器下這倆元素間出現間隙；其它瀏覽器任何情況下均出現間隙；
在例子1中，定義為inline-block元素會產生間隙，如果不設定display:inline-block，會是什麼效果？如下：
例子3：
我是乙個spanspan>
我是乙個spanspan>
我是乙個spanspan>
我是乙個spanspan>
div>
.demo span
效果圖：
上面例子中，對span不做任何處理依然存在空隙，這到底是什麼原因，是否是結構上的問題。假如將span標籤都寫成一行，又是怎樣的效果，來看一下：
我是乙個spanspan>我是乙個spanspan>我是乙個spanspan>我是乙個spanspan>
div>
.demo span
效果圖：
可以看到間隙是由換行或者回車導致的。只要把標籤寫成一行或者標籤直接沒有空格，就不會出現間隙。但是這種方式是不太可靠，存在太多不可控的因素導致失效，例如：**生成工具、**格式化、或者其他人修改了**等等。下面列舉了各種去掉間隙的方法，是否適合需要看具體的應用場景了。
元素間的間隙出現的原因是元素標籤之間的空格，把空格去掉間隙自然就會消失。來看以下幾種寫法：
*寫法一：
我是乙個spanspan>我是乙個spanspan>我是乙個spanspan>我是乙個spanspan>
div>
*寫法二：
我是乙個span
span>我是乙個span
span>我是乙個span
span>我是乙個spanspan>
div>
*寫法三：利用html注釋標籤
我是乙個spanspan>我是乙個spanspan>我是乙個spanspan>我是乙個spanspan>
div>
我是乙個span
我是乙個span
我是乙個span
我是乙個span
div>
.demo span
源**：
在父容器上使用font-size:0;可以消除間隙，可以這樣寫:
我是乙個span
我是乙個span
我是乙個span
我是乙個spanspan>
div>
.demo
.demo span
對於chrome, 其預設有最小字型大小限制，考慮到相容性，需要取消字型大小限制，這樣寫：
我是乙個span
我是乙個span
我是乙個span
我是乙個spanspan>
div>
.demo
.demo span
在移動端的頁面中，個人傾向於設定font-size:0這種方法來清除掉。對於pc端上，可以參考doyoe的 全瀏覽器相容方案 。
以上是在小弟在工作上遇到一些問題的知識總結，不足之處，歡迎指正。
去除inline-block元素間間距的n種方法 ;
如何解決inline-block元素的空白間距
應不應該使用inline-block代替float
css去掉邊框
css去掉div的邊框可以去掉css的border屬性，或者覆蓋border屬性為none來實現。1 如圖，這是乙個帶邊框的div測是頁面。2 第乙個div的邊框是這行css實現的效果 3 第二個div沒有設定邊框樣式 4 第三個div的css設定了邊框樣式，但被內聯樣式覆蓋為none，因此也能不顯...
浮動布局問題多，還是用inline block吧
說說知識陳舊的問題。目前我的前端開發知識積累最大的問題就是版本問題，也許我已經經歷了很多，嘗試了很多，但是有些知識的版本已經過時了，而我還沒有來得及更新它們。更悲劇的可能是有些部分我還沒有意識到。浮動這部分的知識就是嚴重陳舊的，ie6 7時代。現在有機會更新一下。浮動最大的特點是環繞，當然無法做到w...
css去掉iPhone iPad預設按鈕樣式
最近用html5 寫了個手機站，在測試的時候發現在蘋果手機上的乙個問題。所有的按鈕都被了蘋果自帶的樣式給替換了。效果如下 但是正確的應該是醬紫滴！只要在樣式裡面加一句去掉css 去掉iphone ipad的預設按鈕樣式就可以了！input type button input type submit ...