源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 215|回复: 27

[JavaScript] 如何消除inline-block属性带来的标签间间隙

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-3-31 11:14:02 | 显示全部楼层 |阅读模式
这篇文章主要介绍了如何消除inline-block属性带来的标签间间隙的相关资料,需要的朋友可以参考下

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属性带来的标签间间隙问题,希望对大家有所帮助!

回复

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2022-8-28 04:43:27 | 显示全部楼层
灌灌灌灌水
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-19 20:58:22 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2022-9-21 13:57:06 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-21 18:25:31 | 显示全部楼层
笑纳了老板
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

288

积分

中级会员

Rank: 3Rank: 3

积分
288
发表于 2022-11-13 05:41:24 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-14 21:47:01 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-1-6 17:54:39 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-8 07:13:31 | 显示全部楼层
收下来看看怎么样
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-26 04:31:14 | 显示全部楼层
借款金额看了就立刻
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 15:50 , Processed in 0.115850 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表