元素之间有看不见的空白间隙是什么原因造成的?#

• 浏览器会把 inline 内联元素间的空白字符(空格/换行/tab 等)渲染成一个空格
• 为了美观,通常是一个 <li> 放在一行,这导致 <li> 换行后产生了换行字符,它变成一个空格,占用了一个字符的宽度
• 解决办法
  • 为 <li> 设置 float:left,不足之处,有些容器是不能设置浮动的,比如左右切换的焦点图
  • 将所有的 <li> 写在同一行,不足,代码不美观
  • 将 <ul> 的字体大小设置为 0,不足之处, <ul> 里面的其他字体大小也被设置为 0,需要额外的设置其他元素的字体大小,且在 safari 浏览器中依然会出现空白间隙
  • 消除 <ul> 的字符间隔 letter-spacing:-8px,不足之处,需要将其他元素的字符间隔设置为 letter-spacing:normal