CSS 消除 inline-block 元素间的间隙

Unsplash

关于什么是 inline-block 元素间的间隙,我们先来看个简单的例子

#left {
  background-color: coral;
  display: inline-block;
  width:100px;
  height:100px;
}
#center {
  background-color: lightblue;
  display: inline-block;
  width:100px;
  height:100px;
}
#right {
  background-color: khaki;
  display: inline-block;
  width:100px;
  height:100px;
}

<ul id="main">
  <li id="left">left</li>
  <li id="center">center</li>
  <li id="right">right</li>
</ul>

运行结果

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符 (whitespace) ,空白符包括空格,TAB 和回车,解决的办法有:

a. 删掉空格 元素间出现空隙的原因,是因为标签段之间存在空格,只要我们把 HTML 中的空格去掉后,空隙自然就不存在了,下面提供三种去掉空格的方式:

<ul id="main">
  <li id="left">left</li><li id="center">center</li><li id="right">right</li>
</ul>
<ul id="main">
  <li id="left">left
  </li><li id="center">center
  </li><li id="right">right</li>
</ul>
<ul id="main">
  <li id="left">left</li><!--
  --><li id="center">center</li><!--
  --><li id="right">right</li>
</ul>

运行结果

b. 跳过结束标签 在 HTML5 中该方法不受影响,若是在低版本的 IE 浏览器,可能会出现无法识别的问题,只需要在最后一个列表项上加上闭合标签即可

<ul id="main">
  <li id="left">left
  <li id="center">center
  <li id="right">right
</ul>

运行结果

c. 使用负边距 需要根据父元素来确定要使用多少个像素值,这个例子中,我们使用 -8px 就能够让三个元素贴在一起了

#left {
  margin-right: -8px;     
}
#center {
  margin-right: -8px;
}

运行结果

d. 使用负值字符间距 letter-spacing 属性的作用是增加或减少字符间的空白,在这个例子当中,我们在父级添加该属性即可达到消去间隙的作用

#main {
  letter-spacing: -8px;
}

运行结果 1

根据运行结果,我们发现,子项继承父级属性之后,文本内容都堆叠在了一起,所以我们还要在子项中添加 letter-spacing: 0; 属性

#left {
  letter-spacing: 0;
}
#center {
  letter-spacing: 0;
}
#right {
  letter-spacing: 0;
}

运行结果 2

类似的属性还有 word-spacing,该属性是用来定义元素中字之间插入多少空白符,在父级直接添加该属性即可完成我们想要的效果,子项不需要添加其他属性

#main {
  word-spacing: -8px;
}

运行结果

e. 将字体大小设置为 0 该方法是在父级元素中添加 font-size: 0; 属性,但是子元素也会继承父级 0 字体大小的属性,无法显示出文本内容

#main {
  font-size: 0;
}

运行结果 1

若是想要子元素的文本内容呈现出来,只需在每个子项里设置 font-size 属性即可

#left {
  font-size: 16px;
}
#center {
  font-size: 16px;
}
#right {
  font-size: 16px;
}

运行结果 2

f. 使用 Flex 弹性盒 关于 Flex 弹性盒,在该篇博文 CSS 布局_2 Flex弹性盒 中有着详细的介绍,在这里只是提供一个解决方法

#main {
  display: flex;
}
#left {
  flex-basis: 100px;
}
#center {
  flex-basis: 100px;   
}
#right {
  flex-basis: 100px;
} 

运行结果

g. 使用浮动

#left {
  float: left;
}
#center {
  float: left;
}
#right {
  float: left;
}

运行结果

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

VUE 入门基础(8)

十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

2219
来自专栏抠抠空间

jQuery基础

一、jQuery是什么? jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Documen...

31412
来自专栏老马寒门IT

02Vue.js快速入门-Vue入门之数据绑定

Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到...

2645
来自专栏互联网开发者交流社区

最新jquery+easyui_api培训文档

1254
来自专栏葡萄城控件技术团队

CSS变量(自定义属性)实践指南

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少...

1041
来自专栏阮一峰的网络日志

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使...

3164
来自专栏阿炬.NET

按键精灵-常用脚本命令汇集

3529
来自专栏游戏杂谈

DOM的事件模拟

只有根据DOM2级事件实现这些事件的浏览器才返回true,以非标准方式支持这些事件的浏览器会返回false;

1271
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第三天 JavaScript学习【悟空教程】

用户在提交表单时,需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

1571
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

1.什么是jQuery? 1.1 jQuery介绍 jQuery是一个轻型、快速的、小巧的功能丰富的JavaScript类库。本质就是一堆js的函数的组合。对原...

22310

扫码关注云+社区

领取腾讯云代金券