[CSS] <li>之间的空白间隙问题

有时候，我们需要将\<li>横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻\<li>之间会出现8px的空白间隔，不是margin也不是padding。

<html>
  <head>
    <title>demo</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      li {
        width: 100px;
        height: 100px;
        display: inline-block;
        list-style: none;
        color: #32da5e;
      }
      #li1 {
        background: red;
      }
      #li2 {
        background: blue;
      }
      #li3 {
        background: yellow;
      }
      #li4 {
        background: black;
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="li1">a</li>
      <li id="li2">b</li>
      <li id="li3">c</li>
      <li id="li4">d</li>
    </ul>
  </body>
</html>

原因：

浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个\<li>放在一行，这导致\<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决：

将所有\<li>写在同一行。不足：代码不美观。

将\<ul>内的字符尺寸直接设为0，即font-size: 0。

<html>
<head>
<title>demo</title>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    font-size: 0;
  }
  li {
    width: 100px;
    height: 100px;
    display: inline-block;
    list-style: none;
    color: #32da5e;
    font-size: 20px;
  }
  #li1 {
    background: red;
  }
  #li2 {
    background: blue;
  }
  #li3 {
    background: yellow;
  }
  #li4 {
    background: black;
  }
</style>
</head>
<body>
<ul>
  <li id="li1">a</li>
  <li id="li2">b</li>
  <li id="li3">c</li>
  <li id="li4">d</li>
</ul>
</body>
</html>

消除\<ul>的字符间隔letter-spacing: -8px，而这也设置了\<li>内的字符间隔，因此需要将\<li>内的字符间隔设为默认letter-spacing: normal。

<html>
  <head>
    <title>demo</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        letter-spacing: -8px;
      }
      li {
        width: 100px;
        height: 100px;
        display: inline-block;
        list-style: none;
        color: #32da5e;
        letter-spacing: 8px;
      }
      #li1 {
        background: red;
      }
      #li2 {
        background: blue;
      }
      #li3 {
        background: yellow;
      }
      #li4 {
        background: black;
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="li1">a</li>
      <li id="li2">b</li>
      <li id="li3">c</li>
      <li id="li4">d</li>
    </ul>
  </body>
</html>

浅谈CSS中的之间的空白间隔问题

david2tdw / blog

[CSS] <li>之间的空白间隙问题 #106