如何解決inline-block元素的空白間距 css 完美解決

轉載W3CPLUS，鏈接地址：http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

 

有關於使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進行布局，或者使用inline-block來實現元素的居中效果。前面《CSS3制作的分頁導航》一文中就是使用的inline-block制作的居中效果，不過留下了一上問題，就是使用inline-block的元素之間會存在“4px”的空白間距。那么今天我們就一起來說說這個“4px”的問題。

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

*{
  margin: 0;
  padding: 0;
}
ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
}
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
}

上面的demo效果，明顯的可以看出，在inline-block的元素之間存在“4px”的空白：

上面截圖是：IE8-9、Firefox、Safari等瀏覽器下的效果，換句話說，這種現像只有在這幾種瀏覽器中才會出現。下面我們就來說說解決這個“4px”(Chrome下是8px)的幾種方法：

方法二：很多地方討論使用負的margin來解決，比如說：

ul {
		font-size: 12px;
	}
	ul li {
		margin-right: -4px;
		*margin-right: 0;
	}

這種解決方法並不完美，如果你的父元素設置的字號不一樣，可能你的“-4px”就不能解決問題。況且在Chrome中你需要另外設置一個負的margin值才能實現同等的效果。

當然有些文章介紹使用"-0.25em"來解決，這也是跟元素的字號有極大的關系。所以我個人建議不使用負的margin來解決這樣的問

方法三：設置父元素字體為0

第三種方法設置父元素的字體為“0”，然后在“inline-block”元素上重置字體需要的大小。

ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
	font-size: 0px;
    }
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
  font-size: 12px;
}

這種方法在Safari下可問題依然存在：

更新：全兼容的樣式解決方法

經過高人指點，使用純CSS還是找到了兼容的方法，就是在父元素中設置font-size:0,用來兼容chrome等瀏覽器，而使用letter-space:-N px來兼容safari:

.finally-solve {
  letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
  word-spacing: -4px;
  font-size: 0;
}
.finally-solve li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
}