编程 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 正则表达式相关应介绍

Nov 27 Javascript

D3.js 从P元素的创建开始(显示可加载数据)

Oct 30 Javascript

jQuery实现渐变弹出层和弹出菜单的方法

Feb 20 Javascript

JS+JSP通过img标签调用实现静态页面访问次数统计的方法

Dec 14 Javascript

AngularJS实现的简单拖拽功能示例

Jan 02 Javascript

vue中实现移动端的scroll滚动方法

Mar 03 Javascript

Angular动态绑定样式及改变UI框架样式的方法小结

Sep 03 Javascript

Element-UI中Upload上传文件前端缓存处理示例

Feb 21 Javascript

微信小程序之侧边栏滑动实现过程解析（附完整源码）

Aug 23 Javascript

react quill中图片上传由默认转成base64改成上传到服务器的方法

Oct 30 Javascript

使用vue重构资讯页面的实例代码解析

Nov 26 Javascript

JavaScript中展开运算符及应用的实例代码

Jan 14 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 星际争霸

cache_lite试用

2007/02/14 PHP

一些php项目中比较通用的php自建函数的详解

2013/06/06 PHP

解析php常用image图像函数集

2013/06/24 PHP

VPS中使用LNMP安装WordPress教程

2014/12/28 PHP

PHP快速推送微信模板消息

2017/04/14 PHP

php静态成员方法和静态的成员属性的使用方法

2017/10/26 PHP

Smarty缓存机制实例详解【三种缓存方式】

2019/07/20 PHP

在Laravel中使用GuzzleHttp调用第三方服务的API接口代码

2019/10/15 PHP

Nigma vs AM BO3 第一场2.13

2021/03/10 DOTA

Web层改进II-用xmlhttp 无声息提交复杂表单

2007/01/22 Javascript

Javascript Object 对象学习笔记

2014/12/17 Javascript

jQuery的内容过滤选择器学习教程

2016/04/18 Javascript

JS两种类型的表单提交方法实例分析

2016/11/28 Javascript

Node.js数据库操作之连接MySQL数据库（一）

2017/03/04 Javascript

微信小程序之数据双向绑定与数据操作

2017/05/12 Javascript

利用vue组件自定义v-model实现一个Tab组件方法示例

2017/12/06 Javascript

微信小程序新闻网站详情页实例代码

2020/01/10 Javascript

解决removeEventListener 无法清除监听的问题

2020/10/30 Javascript

利用JavaScript为句子加标题的3种方法示例

2021/01/05 Javascript

[03:47]2015国际邀请赛第三日现场精彩回顾

2015/08/08 DOTA

从局部变量和全局变量开始全面解析Python中变量的作用域

2016/06/16 Python

python实现周期方波信号频谱图

2018/07/21 Python

Python通用函数实现数组计算的方法

2019/06/13 Python

Python 循环终止语句的三种方法小结

2019/06/24 Python

Python Web框架之Django框架Form组件用法详解

2019/08/16 Python

基于jupyter代码无法在pycharm中运行的解决方法

2020/04/21 Python

Python request post上传文件常见要点

2020/11/20 Python

eBay加拿大站：eBay.ca

2019/06/20 全球购物

解释一下钝化(Swap out)

2016/12/26 面试题

《小小雨点》教学反思

2014/02/18 职场文书

幼儿园教师岗位职责

2014/03/17 职场文书

小学语文教师研修日志

2015/11/13 职场文书

七年级思品教学反思

2016/02/20 职场文书

Matplotlib可视化之添加让统计图变得简单易懂的注释

2021/06/11 Python

微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)

2021/06/26 数码科技