Html 如何删除内联内联块元素之间的空间

或者，你should now use flexbox来实现很多你以前可能用过的内联挡路的布局

由于这个答案已经变得相当流行，我将对其进行重大重写.

我们不要忘记被问到的实际问题:

如何删除inline-block elements之间的空格？我希望

单独使用CSS可以解决这个问题，但是没有completely个健壮的CSS修复程序.

我在最初的回答中得到的解决方案是在父元素上加上font-size: 0，然后在子元素上声明一个合理的font-size.

http://jsfiddle.net/thirtydot/dGHFV/1361/

这适用于所有现代浏览器的最新版本.它在IE8中工作.它在Safari 5中不起作用，但在Safari 6中起作用.Safari 5几乎是一款死气沉沉的浏览器(0.33%, August 2015).

相对字体大小可能出现的大多数问题修复起来并不复杂.

然而，虽然这是一个合理的解决方案，如果你只修改CSS，这不是我推荐的，如果你可以自由地修改你的HTML(就像我们大多数人一样).

这就是我，作为一名相当有经验的Web开发人员，为了解决这个问题而实际做的事情:

<p>
    <span>Foo</span><span>Bar</span>
</p>

是的，这就对了.我删除了HTML语言中内联挡路元素之间的空格.

很简单.这很简单.它在任何地方都有效.这是务实的解决方案.

有时候，你必须仔细考虑空白的来源.Will appending another element with JavaScript add whitespace?不，如果你做得好就不会.

让我们开始一段神奇的旅程，通过一些新的HTML，以不同的方式删除空白:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• 您可以这样做，就像我通常做的那样:

   <ul>
       <li>Item 1</li><li>Item 2</li><li>Item 3</li>
   </ul>
  

http://jsfiddle.net/thirtydot/dGHFV/1362/个

• 或者，这个:

   <ul>
       <li>Item 1</li
       ><li>Item 2</li
       ><li>Item 3</li>
   </ul>
  

• 或者，使用注释:

   <ul>
       <li>Item 1</li><!--
       --><li>Item 2</li><!--
       --><li>Item 3</li>
   </ul>
  

• 或者，如果您使用的是PHP或类似软件:

   <ul>
       <li>Item 1</li><?
       ?><li>Item 2</li><?
       ?><li>Item 3</li>
   </ul>
  

• 或者，you can甚至完全跳过certain个结束标记(所有浏览器都可以做到这一点):

   <ul>
       <li>Item 1
       <li>Item 2
       <li>Item 3
   </ul>
  

现在，我已经用"一千种不同的方法消除空格，到三十点"让你无聊得要死，希望你已经把font-size: 0种方法都忘得一干二净了.