一、写在前面

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      width: 400px;
      height: 100px;
    }

    ul li {
      width: 100px;
      display: inline-block;
      height: 100px;
    }

    ul .one {
      background-color: red;
    }

    ul .two {
      background-color: green;
    }

    ul .three {
      background-color: pink;
    }

    ul .four {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <ul>
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
    <li class="four"></li>
  </ul>

</body>

</html>

如上述代码所示，我们可以看到其中每一个li元素之间都存在空白间隔，那么是什么原因导致的呢?
二、原因
浏览器默认会把display属性为inline或者inline-block元素间的空白字符（空格换行tab）渲染成一个空格。也就是我们上面li元素换行产生的换行符，而它会变成一个空格，当然空格就占用一个字符的宽度。
三、解决方法
3.1、不使用换行，也就是将所有的li都在一行展示

3.2、将ul的字符尺寸设置为0，文字大小为0,则空格就不会被展示，但是如果在ul中设置的字体，需要重新设置

3.3、给ul设置letter-space:-5px,并且给li的letter-space设置为normal
本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。

li与li之间存在看不见的空白间隔是什么原因引起的？有什么解决办法？

相关文章

热门标签

最新文章