编程 Javascript

如何消除inline-block属性带来的标签间间隙

Posted in Javascript onMarch 31, 2016

1、给inline-block元素设置一个父元素。

设置父元素的font-size：0；。子元素font-size设置成合适大小，如果不设置子元素font-size，子元素会继承父元素的0；

2、给inline-block元素设置一个父元素。(letter-spacing：字符间距)

　设置父元素的letter-spacing为-4px或-8px，除谷歌是-8px外，其余是-4px。同样要设置子元素的letter-spacing：0；否则会

继承父元素，造成子元素内文字变形。

经过试验，统一设置成-8px，在视觉上没有什么差异，不知道这样做可行不可行，如果哪位有意见，随时可以说。

3、给inline-block元素设置一个父元素。(word-spacing：单词间距)

设置父元素的word-spacing为-4px或-8px，谷歌，360是-8px，火狐，IE是-4px。同样要设置子元素的word-spacing：0；否则会继承父元素，造成子元素内文字变形。

同上也可以统一设置为-8px

4、以上谷歌、火狐、360的测试均是在最新浏览器上测试，IE8测试。如有不妥还请告知。

以上内容是小编给大家介绍的inline-block属性带来的标签间间隙问题，希望对大家有所帮助！

如何消除inline-block属性带来的标签间间隙

- Author -

走向未知

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

显示、隐藏密码

Jul 01 Javascript

IE和Firefox下javascript的兼容写法小结

Dec 10 Javascript

JavaScript操作XML实例代码（获取新闻标题并分页，并分页）

May 25 Javascript

js实现幻灯片播放图片示例代码

Nov 07 Javascript

JavaScript设计模式之装饰者模式介绍

Dec 28 Javascript

js实现带有介绍的Select列表菜单实例

Aug 18 Javascript

JS采用绝对定位实现回到顶部效果完整实例

Jun 20 Javascript

javascript类型系统——undefined和null全面了解

Jul 13 Javascript

[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码

Dec 20 Javascript

使用MUI框架模拟手机端的下拉刷新和上拉加载功能

Sep 04 Javascript

vue 组件的封装之基于axios的ajax请求方法

Aug 11 Javascript

JavaScript代理模式原理与用法实例详解

Mar 10 Javascript

JavaScript笔记之数据属性和存储器属性

Mar 31 #Javascript

Node.js中Request模块处理HTTP协议请求的基本使用教程

Mar 31 #Javascript

基于JQuery打造无缝滚动新闻步骤详解

Mar 31 #Javascript

JavaScript位移运算符(无符号) >>> 三个大于号的使用方法详解

Mar 31 #Javascript

JQuery实现简单的服务器轮询效果实例

Mar 31 #Javascript

JavaScript实现复制内容到粘贴板代码

Mar 31 #Javascript

JavaScript是如何实现继承的(六种方式)

Mar 31 #Javascript

You might like

人族 Terran 基本策略

2020/03/14 星际争霸

福利彩票幸运号码自动生成器

2006/10/09 PHP

php addslashes 利用递归实现使用反斜线引用字符串

2013/08/05 PHP

百度地图API应用之获取用户的具体位置

2014/06/10 PHP

浅谈ThinkPHP的URL重写

2014/11/25 PHP

php通过分类列表产生分类树数组的方法

2015/04/20 PHP

详解WordPress中提醒安装插件以及隐藏插件的功能实现

2015/12/25 PHP

PHP与Java对比学习日期时间函数

2016/07/03 PHP

PHP Filter过滤器全面解析

2016/08/09 PHP

curl 出现错误的调试方法(必看)

2017/02/13 PHP

laravel 实现向公共模板中传值 (view composer)

2019/10/22 PHP

基于jquery的仿百度搜索框效果代码

2011/04/11 Javascript

HTML Table 空白单元格补全的简单实现

2016/10/13 Javascript

js随机生成一个验证码

2017/06/01 Javascript

浅谈关于.vue文件中style的scoped属性

2017/08/19 Javascript

React数据传递之组件内部通信的方法

2017/12/31 Javascript

如何在js代码中消灭for循环实例详解

2018/07/29 Javascript

vue路由事件beforeRouteLeave及组件内定时器的清除方法

2018/09/29 Javascript

详解如何快速配置webpack多入口脚手架

2018/12/28 Javascript

jQuery实现弹幕特效

2019/11/29 jQuery

node+multer实现图片上传的示例代码

2020/02/18 Javascript

js实现拖拽元素选择和删除

2020/08/25 Javascript

vue使用screenfull插件实现全屏功能

2020/09/17 Javascript

[50:44]DOTA2-DPC中国联赛正赛 SAG vs Dragon BO3 第二场 2月22日

2021/03/11 DOTA

Python安装模块的常见问题及解决方法

2018/02/05 Python

基于python的图片修复程序（实现水印去除）

2018/06/04 Python

Django项目后台不挂断运行的方法

2019/08/31 Python

Django实现将一个字典传到前端显示出来

2020/04/03 Python

Python字符串对齐、删除字符串不需要的内容以及格式化打印字符

2021/01/23 Python

世界知名接发和假发品牌：Poze Hair

2017/03/08 全球购物

2014年惩防体系建设工作总结

2014/12/01 职场文书

小学教师个人工作总结2015

2015/04/20 职场文书

2015年六一儿童节活动方案

2015/05/05 职场文书

小学语文教学反思范文

2016/03/03 职场文书

python3 实现mysql数据库连接池的示例代码

2021/04/17 Python

MySQL优化之如何写出高质量sql语句

2021/05/17 MySQL