如何解决inline-block元素的空白间距 css 完美解决

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

1
2
3
4
5
6
7
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
  margin0;
  padding0;
}
ul {
  list-stylenone outside none;
  padding10px;
  backgroundgreen;
  text-aligncenter;
}
ul li {
  display: inline-block;
  *displayinline;
  zoom: 1;
  background: orange;
  padding5px;
}

上面的demo效果,明显的可以看出,在inline-block的元素之间存在“4px”的空白:

上面截图是:IE8-9、Firefox、Safari等浏览器下的效果,换句话说,这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法:

方法二:很多地方讨论使用负的margin来解决,比如说:

1
2
3
4
5
6
7
ul {
        font-size12px;
    }
    ul li {
        margin-right-4px;
        *margin-right0;
    }

这种解决方法并不完美,如果你的父元素设置的字号不一样,可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。

当然有些文章介绍使用"-0.25em"来解决,这也是跟元素的字号有极大的关系。所以我个人建议不使用负的margin来解决这样的问

方法三:设置父元素字体为0

第三种方法设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul {
  list-stylenone outside none;
  padding10px;
  backgroundgreen;
  text-aligncenter;
    font-size0px;
    }
ul li {
  display: inline-block;
  *displayinline;
  zoom: 1;
  background: orange;
  padding5px;
  font-size12px;
}

这种方法在Safari下可问题依然存在:

更新:全兼容的样式解决方法

经过高人指点,使用纯CSS还是找到了兼容的方法,就是在父元素中设置font-size:0,用来兼容chrome等浏览器,而使用letter-space:-N px来兼容safari:

1
2
3
4
5
6
7
8
9
10
11
12
13
.finally-solve {
  letter-spacing-4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing-4px;
  font-size0;
}
.finally-solve li {
  font-size16px;
  letter-spacingnormal;
  word-spacingnormal;
  display:inline-block;
  *displayinline;
  zoom:1;
}

from:https://www.cnblogs.com/871735097-/p/4739114.html