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

caspar 发布于2019-08-30 13:47 / 838人阅读

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

什么是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;

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115540.html

深入理解-CSS内联元素之line-height

摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...

wapeyang 2019-08-29 15:06 评论0 收藏0
深入理解-CSS内联元素之line-height

摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...

邹强 2019-08-02 10:15 评论0 收藏0
white-space:nowrap 的妙用

摘要：对于多个元素同在同一行的布局，如比较常见的是轮播。因此最好显式设置的垂直方向上的对齐。做法一的案例有淘宝首页的主轮播通过子元素浮动，父元素清除浮动。可看出这与与应用了的文本容器效果一样。上的效果，应该也一样。对于多个元素同在同一行的布局，如比较常见的是轮播。下面我将探讨这这一布局的做法：首先约定html结果如下： div.row div.col div.col di...

qqlcbb 2019-08-30 12:55 评论0 收藏0
【整理】几种解决inline-block间隙的方案

摘要：有基础的朋友可以直接跳过序言，直接看方案序有几种属性是内联对象，比如标签等，可以堆在一起显示，宽高由内容决定，不能设置是块对象，比如标签等，要占一整行，但是宽高可以自定义为了弥补和的不足，又扩充了属性可以将对象呈递为内联对象，而内容作为 showImg(https://segmentfault.com/img/remote/1460000010989238); 有基础的朋友可以直接跳...

array_huang 2019-08-29 13:20 评论0 收藏0