html - 如何删除内联/内联 block 元素之间的空间？

Question

这些 span 元素之间将有 4 像素宽的空间:

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

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

Fiddle Demo

我知道我可以通过删除 HTML 中 span 元素之间的空白来消除该空间:

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

我正在寻找不涉及的 CSS 解决方案:

• 更改 HTML。
• JavaScript。

Answer 1

或者，您 should now use flexbox实现许多您以前可能使用过 inline-block 的布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

由于这个答案变得相当流行，我正在重写它。

我们不要忘记提出的实际问题:

How to remove the space between inline-block elements? I was hopingfor a CSS solution that doesn't require the HTML source code to betampered with. Can this issue be solved with CSS alone?

可以单独使用 CSS 解决这个问题，但是没有完全强大的 CSS 修复。

我最初回答的解决方案是添加 font-size: 0到父元素，然后声明一个明智的font-size在 child 身上。

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 中内联 block 元素之间的空格。

这很容易。这很简单。它无处不在。这是务实的解决方案。

您有时必须仔细考虑空格的来源。 用 JavaScript 附加另一个元素会添加空格吗？不，如果你做得好，不会。

让我们开始一段神奇的旅程，用不同的方式去除空白，使用一些新的 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。 .