display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。
方案一：给元素设置float:left,缺点高度塌陷，要清除浮动。（推荐）
li{display:inline-blockpadding:5pxbackground-color:#ff6float:left}
.clr:after{clear:bothdisplay:blockoverflow:hiddenheight:0content:"."}
.clr{zoom:1}
<ul class="clr">
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">XML</a></li>
</ul>
方案二：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案三：设置父元素 display:tableword-spacing:-1em目前这个方法可以完美解决，且兼容其他浏览器。
这个问题不复杂，也不难理解。你要知道有的元素本身是有padding值的，ul,ol 标签水平方向默认有padding值，
同样的，p,ul,ol,dl 标签垂直方向默认有margin值。
所以你会在别的项目里看到样式充值；就是reset.css；这里面会把所有的默认值统一或者去掉。
回到你的问题；你只要在css里申明；ul{padding:0margin:0}就可以了
1.如果是将div编程了inline-block后，之间是有间隙的。这个没有办法修改的。2.如果希望两个div紧邻着，可以使用浮动和定位。
下面是简单的例子，进攻参考：
浮动的方式：
<style>
div {width:100pxheight:100pxbackgorund:#cccfloat:left}
</style>
<body>
<div></div>
<div></div>
</body>定位的方式
<style>
div {width:100pxheight:100pxbackgorund:#cccposition:absolutetop:0
left:0}
.d2 {left:100px}
</style>
<body>
<div></div>
<div class="d2"></div>
</body>
