html怎么去除版块间隙,深入css之去除inline-block元素之间的多余间隙

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

考虑以下代码：

One

Two

Three

nav a {

display: inline-block; //或者inline;

padding: 5px;

background: red;

}

我们会得到如下结果：

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

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

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

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

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

将代码写成一行：

OneTwoThree

或者用注释填充：

OneTwoThree

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

优点： 不需要通过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都是０)。

4.父容器设置display: flex;

优点：弹性布局可以去除多余间隙，而且可以轻松的实现垂直居中，水平居中等效果。

缺点：过低版本的浏览器不支持该属性。