深入css之去除inline-block元素之间的多余间隙

什么是inline-block之间的多余间隙

考虑以下代码:

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
nav a {
  display: inline-block; //或者inline;
  padding: 5px;
  background: red;
}

我们会得到如下结果:

深入css之去除inline-block元素之间的多余间隙

诶?我们明明没有在设置margin-right,为什么a标签之间会有间隙?

答: 产生的间隙来自于html代码中标签与标签之间的间隙, 该间隙会根据父容器的字体大小而变化(上述示例代码中,nav的font-size越大,该间隙越大)。


如何去除这些多余的间隙?

在明确了这些间隙产生的原因后,要去除这些间隙就变得容易多了,通常有以下集中办法去除这些间隙:

1.去除html代码中的间隙:

将代码写成一行:

<nav>
  <a href="#">One</a><a href="#">Two</a><a href="#">Three</a>
</nav>

或者用注释填充:

<nav>
  <a href="#">One</a><!-- 
 --><a href="#">Two</a><!-- 
 --><a href="#">Three</a>
</nav>

都可以去掉这些多余间隙。

深入css之去除inline-block元素之间的多余间隙

优点: 不需要通过css处理,从根本上解决问题
缺点: 代码可读性降低,项目里写成这样估计会被吊起来打。

2.通过负的margin抵消多余间隙

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
  margin-right: -4px;  //增加了这一行
}

优点: 简单
缺点: 由于多余间隙的大小会受父容器的font-size大小影响,所以margin-right的值要依情况设置,不好控制。

3.父容器设置font-size:0; 内部子元素单独设置字体大小,即:

nav {
  font-size: 0; //增加了这一行
}

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
  font-size: 14px; //增加了这一行
}

优点:相比与设置负的margin-right大小的不确定性,设置font-size:0;显得更加好控制。
缺点:由于font-size的可继承性,导致其子元素都继承font-size:0;只能重写覆盖。如果项目中的字体大小设置采用的是em而不是px, 那么子元素的字体大小就无法通过em来进行设置了(不管多少em都是0)。

4.父容器设置display: flex;

优点:弹性布局可以去除多余间隙,而且可以轻松的实现垂直居中,水平居中等效果。
缺点:过低版本的浏览器不支持该属性。

相关推荐