首页 > 代码库 > display:inline-block;空白边距

display:inline-block;空白边距

  平常用display:inline-block;让列表水平的时候发现,水平每一行中间都有3px间距。如图所示:

         

        

   中间空白边距 网上查了一下发现,是由于平时写代码中间有空格造成的。

  这里之记录三种方法,

  1,font-size:0;

  在ul{font-size:0;}

       li{font-size:14px;}

  在父元素里吧font-size重置,就消除了空格,然后再子元素里吧font-size改回来就可以了。但是次方法对safari不管用。

  2,兼容safari

    ul{
      font-size:0;
      letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/
      word-spacing: -8px;
      }
      li{
        display:inline-block;
        *display:inline;
        *zoom:1;
        letter-spacing:normal;
        word-spacing:normal;
      }

    letter spacing 消除了字母间空格,兼容safari。

  3,jQuery方法

  $(‘.removeTextNodes‘).contents().filter(function() {
    return this.nodeType === 3;
    }).remove();

 

    更多方法请看http://www.jb51.net/css/68785.html 上面把每种方式记录的很清楚。

display:inline-block;空白边距