如何修改html中留白的空行,如何解决inline-block元素的空白间距

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

大家首先来看一个DEMO：

HTML Markup

• item1
• item2
• item3
• item4
• item5

CSS Code

*{

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)的几种方法：

方法一：改变HTML结构

简单一点的方法