正文 1571字数 39,503阅读

为什么会产生间隙？
由于编写代码时的美观和可读性，在代码中添加回车或空格而产生的间隙。

html代码：
<ul class="container"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <style> .container li{ display: inline-block; width:100px; height:100px; border:1px solid #ccc; } </style>
Run code
Cut to clipboard

    方法一：
    调整html代码，缺点降低了可读性，如下
    <ul class="container"> <li> </li><li> </li><li> </li><li> </li><li> </li><li> </li> </ul>
    Run code
    Cut to clipboard

      或者
      <ul class="container"> <li></li><li></li><li></li><li></li><li></li><li></li> </ul>
      Run code
      Cut to clipboard

        方法二：
        去掉闭合标签：
        <ul class="container"> <li> <li> <li> <li> <li> <li> </ul>
        Run code
        Cut to clipboard

          方法三：
          font-size:0
          .container{ font-size: 0; -webkit-text-size-adjust:none; } .container li{ font-size:12px; }
          Run code
          Cut to clipboard

            方法四：
            margin设为负值,*注：margin的值通常为font-size的一本半取相反数
            .container li{ margin-left:-.5em; }
            Run code
            Cut to clipboard

              方法五：
              letter-spacing，跟上一种方式一样，取值为font-size的一半（取相反数）
              .container{ letter-spacing: -.5em; }
              Run code
              Cut to clipboard

                方法六：
                word-spacing，类似
                .container{ word-spacing: -.5em; }
                Run code
                Cut to clipboard