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

跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

May 04 Javascript

ajax不执行success回调而是执行了error回调

Dec 10 Javascript

取得元素的左和上偏移量的方法

Sep 17 Javascript

面向切面编程（AOP）的理解

May 01 Javascript

Bootstrap模态对话框的简单使用

Apr 29 Javascript

AngularJS 视图详解及示例代码

Aug 17 Javascript

JS Select下拉框(支持输入模糊查询)

Feb 04 Javascript

JavaScript调试之console.log调试的一个小技巧分享

Aug 07 Javascript

React Native之TextInput组件解析示例

Aug 22 Javascript

使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

Mar 22 Javascript

MockJs结合json-server模拟后台数据

Aug 26 Javascript

js 图片懒加载的实现

Oct 21 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

某大型网络公司应聘时的笔试题目附答案

2008/03/27 PHP

PHP伪静态写法附代码

2008/06/20 PHP

PHP7新特性foreach 修改示例介绍

2016/08/26 PHP

阿里云PHP SMS短信服务验证码发送方法

2017/07/11 PHP

Using the TextRange Object

2006/10/14 Javascript

JQuery操作单选按钮以及复选按钮示例

2013/09/23 Javascript

jQuery 追加元素的方法如append、prepend、before

2014/01/16 Javascript

DOM节点深度克隆函数cloneNode()用法实例

2015/01/12 Javascript

JavaScript计算某一天是星期几的方法

2015/08/05 Javascript

jQuery仿淘宝网产品品牌隐藏与显示效果

2015/09/01 Javascript

Bootstrap的Refresh Icon也spin起来

2016/07/13 Javascript

详解vue项目的构建，打包，发布全过程

2017/11/23 Javascript

vue-router动态设置页面title的实例讲解

2018/08/30 Javascript

electron实现qq快捷登录的方法示例

2018/10/22 Javascript

vuex实现购物车功能

2020/06/28 Javascript

[01:02]2014 DOTA2国际邀请赛中国区预选赛现场抢先看

2014/05/22 DOTA

python实现实时监控文件的方法

2016/08/26 Python

python并发编程之线程实例解析

2017/12/27 Python

Linux(Redhat)安装python3.6虚拟环境(推荐)

2018/05/05 Python

使用python将请求的requests headers参数格式化方法

2019/01/02 Python

Python3最长回文子串算法示例

2019/03/04 Python

200行python代码实现2048游戏

2019/07/17 Python

python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】

2019/10/24 Python

pytorch:model.train和model.eval用法及区别详解

2020/02/20 Python

基于python实现把json数据转换成Excel表格

2020/05/07 Python

python 爬虫如何正确的使用cookie

2020/10/27 Python

Python实现Excel自动分组合并单元格

2021/02/22 Python

Expedia英国：全球最大的在线旅游公司

2017/09/07 全球购物

英国可持续奢侈品包包品牌：Elvis & Kresse

2018/08/05 全球购物

世界排名第一的运动鞋市场：Flight Club

2020/01/03 全球购物

社会实践心得体会

2014/01/03 职场文书

入股协议书

2014/04/14 职场文书

电钳工人个人求职信

2014/05/10 职场文书

支行行长竞聘演讲稿

2014/05/15 职场文书

课堂打架检讨书200字

2014/11/21 职场文书

2015年高三教学工作总结

2015/07/21 职场文书