解决li inline-block后有8px间隔

作者: MAYDAY77 | 来源:发表于2019-05-23 12:53 被阅读0次

给li设置display:inlie-block之后，每个li之间有8px的空白，

这个空白间隔，既不是margin也不是padding，而是因为浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个li放在一行，这导致li换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。(CSDN上查的)。

解决方法：

给ul设置letter-spacing: -8px;

设置完之后li内的字符间隔也设置为了-8px;
需要再单独对li进行设置 letter-spacing: nomal; 即可解决。

完美~

解决li inline-block后有8px间隔
给li设置display:inlie-block之后，每个li之间有8px的空白，这个空白间隔，既不是margi...
标签之间有间距怎么处理
当我们将
设置为inline-block时会发现
左右会有间距,解决办法就是将
- ul font-size为0，li设置字体大小后多出下间隙
  设置横向布局的ul li时若li使用display:inline-block会因为换行符而使相邻的li出现间距将...
- 面试题
  数组易错点 JS数字精度问题(点击查看解析) li和li之间会有空白间隙，咋解决？如果需要手写动画，最小时间间隔...
- 前端基础小任务（一）
  1. 使用inline-block什么时候会显示间隔？有多少种方式可以解决? 存在空格符、换行符、制表符的时候，...
- css面试题总结
  1 、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？原因：浏览器的默认行为是把inline元...
- 美化滚动条样式
  ：：webkit-scrollbar{width:8px;height:8px;background-color:...
- 改变滚动条样式放在全局生效
  ::-webkit-scrollbar{width: 8px;height: 8px;background-col...
- 10css兼容性问题
  margin兼容性问题 display:inline-block IE6 最小高度问题 IE6 双边距 li里元素...
- css 基础
  overflow: hidden错位解决方法 /*display: inline-block;position: ...