搜索

Remove spaces between inline-block elements

1110

今天下午三思问我,关于inline-block元素之间的缝隙怎么去除,怎么做到inline一样?

犁地哥

其实对于这个问题的解决方法就是删除换行

删除空格

不过从重构人员给出“产品”给研发,为了便于研发嵌套页面,一般都是给很清晰的代码,如:

未压缩的html

压缩后的html

在此我们又要保证清晰的代码,又要保证压缩前与压缩后,我们的inline-block元素之间都不希望出现space,那怎么办?

对于重构和研发配合之间这是一种最优的解决方案:

解决方案

为什么说它是最优解决方案呢?在最后产出的页面,一般都会进行压缩操作删除空格及注释之类。你觉得这种方案好吗?如果不好,你有什么更好的方法一起分享?

8 位同学留下了脚印

  1. 虎小兵 2011-09-02

    试了下元素之间还真会有space,浮动可以比较方便的解决,但是不知道有没有更好的方法

    回复
  2. 苏昊 2011-02-15

    letter-spacing:-0.34em;word-spacing:-0.3em;font-family:Tahoma;给外围标签加上,数值与字体有关,这里给出的是Tahoma字体关于letter-spacing,word-spacing的值,如果为宋体,应该是-.5em。内层元素letter-spacing:0;word-spacing:0;再还原即可。

    回复
  3. kaso 2011-01-11

    额,这个好像不只是inline-block吧,inline元素换行也是的。。。
    可以放到一行,或者浮动,别地母鸡。。。

    回复
  4. wei 2010-12-31

    我使用了inline-block.没有发现这个问题呢。
    ie/firefox/Chrome/Opera/Safari 等几个主流浏览器都没有space问题。

    回复
    • Jessica 2011-01-04

      比如
      <span>犀利哥</span>
      <span>犀利哥</span>
      <span>犀利哥</span>
      换行时的inline-block元素之间就会space,去试试,呵呵

      回复
  5. elonglau 2010-12-13

    很高深的讨论啊,来学习一下

    回复
  6. meters 2010-12-02

    父层font-size:0,chrome下即使通过-webkit-text-size-adjust:none来强制字体大小为0,但是仍然没法靠在一起,不过可以通过letter-spacing:-3px来模拟.
    这个问题确实很讨厌,开发同学都说li连到一起写很恶心…

    回复
  7. Avenir 2010-11-15

    父层font-size设0试试看。

    回复

同学有话要说吗?