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

Flexigrid在IE下不显示数据的有效处理方法

Sep 04 Javascript

JavaScript实现的经典文件树菜单效果

Sep 08 Javascript

jQuery简单实现两级下拉菜单效果代码

Sep 15 Javascript

AngularJS实现元素显示和隐藏的几个案例

Dec 09 Javascript

JS中生成随机数的用法及相关函数

Jan 09 Javascript

jQuery qrcode生成二维码的方法

Apr 03 Javascript

基于jQuery实现选项卡效果

Jan 04 Javascript

Node.js 使用流实现读写同步边读边写功能

Sep 11 Javascript

使用vue与jquery实时监听用户输入状态的操作代码

Sep 19 jQuery

微信公众号H5之微信分享常见错误和问题(小结)

Nov 14 Javascript

layui数据表格重载实现往后台传参

Nov 15 Javascript

在antd4.0中Form使用initialValue操作

Nov 02 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

php5.3 注意事项说明

2013/07/01 PHP

php的declare控制符和ticks教程(附示例)

2014/03/21 PHP

PHP实现的比较完善的购物车类

2014/12/02 PHP

php实现使用正则将文本中的网址转换成链接标签

2014/12/03 PHP

CentOS下搭建PHP环境与WordPress博客程序的全流程总结

2016/05/07 PHP

php+MySql实现登录系统与输出浏览者信息功能

2016/07/01 PHP

优秀js开源框架-jQuery使用手册(1)

2007/03/10 Javascript

跨域表单提交状态的变相判断代码

2009/11/12 Javascript

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

2012/07/31 Javascript

原生js实现淘宝首页点击按钮缓慢回到顶部效果

2014/04/06 Javascript

javascript实时显示北京时间的方法

2015/03/12 Javascript

jQuery可见性过滤器：hidden和：visibility用法实例

2015/06/24 Javascript

基于JavaScript创建动态Dom

2015/12/08 Javascript

基于AngularJS+HTML+Groovy实现登录功能

2016/02/17 Javascript

jQuery使用zTree插件实现树形菜单和异步加载

2016/02/25 Javascript

JavaScript程序中的流程控制语句用法总结

2016/05/23 Javascript

移动端点击态处理的三种实现方式

2017/01/12 Javascript

Vue中的v-cloak使用解读

2017/03/27 Javascript

js实现分页功能

2017/05/24 Javascript

Vue+mui实现图片的本地缓存示例代码

2018/05/24 Javascript

分享5个好用的javascript文件上传插件

2018/09/16 Javascript

微信小程序网络层封装的实现（promise, 登录锁）

2019/05/08 Javascript

vue中使用腾讯云Im的示例

2020/10/23 Javascript

Python开发的单词频率统计工具wordsworth使用方法

2014/06/25 Python

python使用range函数计算一组数和的方法

2015/05/07 Python

Django urls.py重构及参数传递详解

2019/07/23 Python

基于Python中Remove函数的用法讨论

2020/12/11 Python

全球最大的网上自行车商店：Chain Reaction Cycles

2016/12/02 全球购物

全球速卖通：AliExpress（国际版淘宝）

2017/09/20 全球购物

GOOD AMERICAN官网：为曲线性感而设计

2017/12/28 全球购物

美国最大的在线生存商店：Survival Frog

2020/12/13 全球购物

新教师培训心得体会

2014/09/02 职场文书

个人培训总结

2015/03/05 职场文书

PHP实现考试倒计时功能代码

2021/04/16 PHP

SQL Server中使用表变量和临时表

2022/05/20 SQL Server

win7配置本地ftp服务器的图文教程

2022/08/05 Servers