很多时候我们需要将元素并排，方法有很多种，比如使用float或者positition，笔者最喜欢用的属性是display: inline-block。但是inline-block的元素之间会存在“4px”的空白间距（chrome下是8px）。

以下是几种解决方法：

一、改变HTML结构

结构一：

样式
<ul>
  <li>
  content1</li><li>
  content2</li><li>
  content3</li><li>
  content4</li><li>
  content5</li>  
</ul>

结构二：

样式
<ul>
  <li>content1</li
  ><li>content2</li
  ><li>content3</li
  ><li>content4</li
  ><li>content5</li>  
</ul>

结构三：

样式
<ul>
  <li>content1</li><!--
  --><li>content2</li><!--
  --><li>content3</li><!--
  --><li>content4</li><!--
  --><li>content5</li>  
</ul>

结构四：

样式
<ul><li>content1</li><li>content2</li><li>content3</li><li>content4</li><li>content5</li></ul>

方法一所说的是通过标签来解决，虽然问题是解决了，但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候，一旦你的HTML不是自己写，而是后台生成，就比如CMS来说，标签后台生成，此时，我想大家又要骂街了，这可怎么办？其实我们除了上面的方法，还可以使用CSS来解决的。

二、负的margin

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

这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的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;
}

这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在。

四、丢失结束标签

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

这种方法虽然能达到各浏览器的兼容，但还是有一个前提，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。

五、jquery方法

$('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
}).remove();

上面讲述了多种方法，但要兼容多个浏览器版本，并不每种方法实用，以前常用的方法，这次测试并不兼容所有浏览器。要做到兼容所有浏览器，个人认为还是在html的标签上做一定的处理，或者采用最后一种方法，通过“jQuery”来改变“nodeType”值达到效果。针对这个“inline-block”之间的间距有几篇文章做过介绍，但里面的方法，和上面介绍的测试的基本一样，具体如何运用，大家还是根据自己的需求进行选择或处理。