inline-block产生空隙解决办法

Posted on | In | | reads times

inline-block元素之间会产生空隙，原因是空格或换行符，空隙大小为fontsize倍数。
解决办法：

  1. 去掉换行或空格
  2. 对父容器设置fontsize为0
  3. 对父容器设置display:table; word-spacing:-1em;
  4. float:left，副作用margin坍塌
  5. 对子元素设置margin为负值

子元素inline-block与父元素之间产生空隙

  1. 对子元素设置vertical-align，如果父元素没有定宽高，则自动撑开，没有缝隙
    vertical-align指的是行内元素对其，设置为top/middle都可以（父元素无宽高的状况下）
  2. font-size为0（扩展性较差，不建议使用）