博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
去除inline-block元素间间距
阅读量:6249 次
发布时间:2019-06-22

本文共 473 字,大约阅读时间需要 1 分钟。

根本原因:元素之间之所以有空白间距是因为空格有字体大小原因。

 

第一种:

  把代码之间的换行空白都去掉。

      例如:

     <div>第一个inline-block元素</div><div>第二个inline-block元素</div>

第二种:  

  把inline-block元素用一个大的div包起来,然后设置其字体大小为0即可,inline-block元素字体大小再单独设置。

  例如:

     <div style=”font-size:0" class="space">

          <div>第一个inline-block元素</div>
          <div>第二个inline-block元素</div>
     </div>

这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加: 

类似下面的代码:

.space {

    font-size: 0;

    -webkit-text-size-adjust:none;

}

 

转载地址:http://yigia.baihongyu.com/

你可能感兴趣的文章
(git应用)一台电脑多项目版本控制
查看>>
【跃迁之路】【637天】程序员高效学习方法论探索系列(实验阶段394-2018.11.10)...
查看>>
小菊花课堂之JavaScript作用域与闭包
查看>>
AliOS Things 电源管理框架使用说明
查看>>
Vue-cli的打包初体验
查看>>
关于MySQL 通用查询日志和慢查询日志分析
查看>>
一文带你学会使用YOLO及Opencv完成图像及视频流目标检测(上)|附源码
查看>>
单Activity多Fragment动态修改状态栏颜色功能
查看>>
AI技术出海 - 阿里云GPU服务器助力旷视勇夺4项世界第一
查看>>
小程序 二次封装wx.request方法
查看>>
C++ 类型转换
查看>>
promise.then
查看>>
Java中的四种引用类型:强引用、软引用、弱引用和虚引用
查看>>
cordova create 创建项目出错 (Error: Unhandled "error" event)
查看>>
指标模型运算系统的意义与实现
查看>>
简单实现 VUE 中 MVVM - step1 - defineProperty
查看>>
算法-比较数据
查看>>
Redux 关系图解
查看>>
vue 1.x 交互-仿百度下拉列表
查看>>
Zsh 开发指南(第一篇 变量和语句)
查看>>