编程 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与Image加载事件(onload)、加载状态(complete)

Feb 14 Javascript

javascript禁制后退键(Backspace)实例代码

Nov 15 Javascript

js动态获取子复选项并设计全选及提交的实现方法

Jun 24 Javascript

Vue.js 表单校验插件

Aug 14 Javascript

jQuery判断是否存在滚动条的简单方法

Sep 17 Javascript

js利用appendChild对标签进行排序的实现方法

Oct 16 Javascript

浅析前端路由简介以及vue-router实现原理

Jun 01 Javascript

vue实现带复选框的树形菜单

May 27 Javascript

Vue+Django项目部署详解

May 30 Javascript

vue如何自动化打包测试环境和正式环境的dist/test文件

Jun 06 Javascript

微信小程序简单的canvas裁剪图片功能详解

Jul 12 Javascript

js实现简易点击切换显示或隐藏

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

将PHP作为Shell脚本语言使用

2006/10/09 PHP

phpMyAdmin2.11.6安装配置方法

2008/08/24 PHP

PHP Session 变量的使用方法详解与实例代码

2013/09/11 PHP

PHP crc32()函数讲解

2019/02/14 PHP

prototype Element学习笔记(Element篇三)

2008/10/26 Javascript

javascript eval函数深入认识

2009/02/21 Javascript

js中opener与parent的区别详细解析

2014/01/14 Javascript

jQuery中focus事件用法实例

2014/12/26 Javascript

coffeescript使用的方式汇总

2015/08/05 Javascript

javascript实现tab切换特效

2015/11/12 Javascript

原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

2016/06/21 Javascript

AngularJS ng-repeat数组有重复值的解决方法

2016/10/23 Javascript

JS实现PC手机端和嵌入式滑动拼图验证码三种效果

2017/02/15 Javascript

JavaScript实现HTML5游戏断线自动重连的方法

2017/09/18 Javascript

Javascript中将变量转换为字符串的三种方法

2017/09/19 Javascript

js实现自定义右键菜单

2020/05/18 Javascript

基于elementUI竖向表格、和并列的案例

2020/10/26 Javascript

[01:10]DOTA2次级职业联赛 - Fly战队宣传片

2014/12/01 DOTA

python通过pil为png图片填充上背景颜色的方法

2015/03/17 Python

Python列表list内建函数用法实例分析【insert、remove、index、pop等】

2017/07/24 Python

itchat和matplotlib的结合使用爬取微信信息的实例

2017/08/25 Python

python的pytest框架之命令行参数详解（上）

2019/06/27 Python

python3.7简单的爬虫实例详解

2019/07/08 Python

学Python 3的理由和必要性

2019/11/19 Python

python3实现elasticsearch批量更新数据

2019/12/03 Python

TensorFlow的reshape操作 tf.reshape的实现

2020/04/19 Python

使用keras2.0 将Merge层改为函数式

2020/05/23 Python

Python实现Word文档转换Markdown的示例

2020/12/22 Python

Python3+Django get/post请求实现教程详解

2021/02/16 Python

HTML5 WebGL 实现民航客机飞行监控系统

2019/07/25 HTML / CSS

.NET初级开发工程师面试题

2014/04/18 面试题

月度优秀员工获奖感言

2014/08/16 职场文书

医学检验专业自荐信

2014/09/18 职场文书

群众路线党员自我评议范文2014

2014/09/24 职场文书

工伤调解协议书

2016/03/21 职场文书

施工安全责任协议书

2016/03/23 职场文书