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

如何实现iframe(嵌入式帧)的自适应高度

Jul 26 Javascript

你需要知道的10个最佳javascript开发实践小结

Apr 15 Javascript

jQuery插件 selectToSelect使用方法

Oct 02 Javascript

jQuery实现可收缩展开的级联菜单实例代码

Nov 27 Javascript

JQuery中属性过滤选择器用法实例分析

May 18 Javascript

css如何让浮动元素水平居中

Aug 07 Javascript

jQuery实现的简单悬浮层功能完整实例

Jan 23 Javascript

使用Math.max,Math.min获取数组中的最值实例

Apr 25 Javascript

微信小程序表单验证错误提示效果

May 19 Javascript

element-ui中select组件绑定值改变,触发change事件方法

Aug 24 Javascript

vue cli3.0结合echarts3.0与地图的使用方法示例

Mar 26 Javascript

ES6 Object属性新的写法实例小结

Jun 25 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

phpMyAdmin 链接表的附加功能尚未激活的问题

2010/08/01 PHP

yii操作cookie实例简介

2014/07/09 PHP

php学习笔记之基础知识

2014/11/08 PHP

简单谈谈php延迟静态绑定

2016/01/26 PHP

php简单实现sql防注入的方法

2016/04/22 PHP

php让json_encode不自动转义斜杠“/”的方法

2020/04/27 PHP

JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件

2010/09/12 Javascript

javascript转换日期字符串为Date日期对象的方法

2015/02/13 Javascript

浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

2016/03/16 Javascript

AngularJS指令详解及示例代码

2016/08/16 Javascript

详解nodejs 文本操作模块-fs模块（三）

2016/12/22 NodeJs

js实现随机抽选效果、随机抽选红色球效果

2017/01/13 Javascript

深入nodejs中流(stream)的理解

2017/03/27 NodeJs

详解从零搭建 vue2 vue-router2 webpack3 工程

2017/11/22 Javascript

微信小程序实现折叠展开效果

2018/07/19 Javascript

JS+CSS实现3D切割轮播图

2020/03/21 Javascript

在Python的Django框架中simple-todo工具的简单使用

2015/05/30 Python

Python正则抓取新闻标题和链接的方法示例

2017/04/24 Python

Python网络编程使用select实现socket全双工异步通信功能示例

2018/04/09 Python

Flask框架单例模式实现方法详解

2019/07/31 Python

python爬虫刷访问量 2019 7月

2019/08/01 Python

安装2019Pycharm最新版本的教程详解

2019/10/22 Python

HTML5 placeholder(空白提示)属性介绍

2013/08/07 HTML / CSS

详解HTML5 Canvas标签及基本使用

2020/01/10 HTML / CSS

Madewell美德威尔美国官网：美国休闲服饰品牌

2016/11/25 全球购物

Snapfish爱尔兰：在线照片打印和个性化照片礼品

2018/09/17 全球购物

台湾7-ELEVEN线上购物中心：7-11

2021/01/21 全球购物

应聘编辑职位自荐信范文

2014/01/05 职场文书

秋季婚礼证婚词

2014/01/11 职场文书

表彰会主持词

2014/03/26 职场文书

幼儿园新年寄语

2014/04/03 职场文书

模具专业求职信

2014/06/26 职场文书

小学家长学校培训材料

2014/08/24 职场文书

公安机关查摆剖析材料

2014/10/10 职场文书

迎国庆主题班会

2015/08/17 职场文书

关于党风廉政建设宣传教育月的活动总结！

2019/08/08 职场文书