编程 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 相关文章推荐

javascript代码加载优化方法

Jan 30 Javascript

JavaScript打开word文档的实现代码(c#)

Apr 16 Javascript

IFrame跨域高度自适应实现代码

Aug 16 Javascript

javascript去掉前后空格的实例

Nov 07 Javascript

Javascript中级语法快速入手

Jul 30 Javascript

各式各样的导航条效果css3结合jquery代码实现

Sep 17 Javascript

Validform验证时可以为空否则按照指定格式验证

Oct 20 Javascript

JS正则表达式常见用法实例详解

Jun 19 Javascript

深入浅析var,let,const的异同点

Aug 07 Javascript

javascript中关于类型判断的一些疑惑小结

Oct 14 Javascript

Vue列表循环从指定下标开始的多种解决方案

Apr 08 Javascript

Vue Cli3 打包配置并自动忽略console.log语句的方法

Apr 23 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

《雄兵连》《烈阳天道》真的来了

2020/07/13 国漫

在php7中MongoDB实现模糊查询的方法详解

2017/05/03 PHP

Yii2中简单的场景使用介绍

2017/06/02 PHP

Laravel 5.4因特殊字段太长导致migrations报错的解决

2017/10/22 PHP

JQuery 遮罩层实现(mask)实现代码

2010/01/09 Javascript

JavaScript 设计模式之组合模式解析

2010/04/09 Javascript

JS面向对象编程之对象使用分析

2010/08/19 Javascript

jquery更换文章内容与改变字体大小代码

2013/09/30 Javascript

判断文件是否正在被使用的JS代码

2013/12/21 Javascript

javascript控制在光标位置插入文字适合表情的插入

2014/06/09 Javascript

jQuery实现仿新浪微博浮动的消息提示框(可智能定位)

2015/10/10 Javascript

深入理解Angular2 模板语法

2016/08/07 Javascript

原生JS实现匀速图片轮播动画

2016/10/18 Javascript

浅析javaScript中的浅拷贝和深拷贝

2017/02/15 Javascript

AngularJS 打开新的标签页实现代码

2017/09/07 Javascript

js中this对象用法分析

2018/01/05 Javascript

iview日期控件,双向绑定日期格式的方法

2018/03/15 Javascript

JS document form表单元素操作完整示例

2020/01/13 Javascript

JavaScript中的各种宽高属性的实现

2020/05/08 Javascript

jquery实现加载更多"转圈圈"效果(示例代码)

2020/11/09 jQuery

小程序角标的添加及绑定购物车数量进行实时更新的实现代码

2020/12/07 Javascript

详细解读Python中的__init__()方法

2015/05/02 Python

python urllib urlopen()对象方法/代理的补充说明

2017/06/29 Python

python列表每个元素同增同减和列表元素去空格的实例

2019/07/20 Python

face++与python实现人脸识别签到（考勤）功能

2019/08/28 Python

Python 3.8 新功能大揭秘【新手必学】

2020/02/05 Python

Django实现任意文件上传（最简单的方法）

2020/06/03 Python

Python+kivy BoxLayout布局示例代码详解

2020/12/28 Python

CSS3动画之利用requestAnimationFrame触发重新播放功能

2019/09/11 HTML / CSS

路由表示做什么用的？在linux环境中怎么来配置一条默认路由？

2013/06/07 面试题

小学见习报告

2014/10/31 职场文书

小学体育组工作总结

2015/08/13 职场文书

PyCharm 安装与使用配置教程（windows,mac通用）

2021/05/12 Python

Golang 遍历二叉树

2022/04/19 Golang

Echarts如何重新渲染实例详解

2022/05/30 Javascript

js前端设计模式优化50%表单校验代码示例

2022/06/21 Javascript