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

小编典典

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

html

鉴于此HTML和CSS：

span {

    display:inline-block;

    width:100px;

    background-color:palevioletred;

}


<p>

    <span> Foo </span>

    <span> Bar </span>

</p>

结果，SPAN元素之间将有4像素宽的空间。

我知道为什么会发生这种情况，而且我也知道可以通过删除HTML源代码中SPAN元素之间的空白来摆脱该空间，如下所示：

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

但是，我希望找到一种不需要篡改HTML源代码的CSS解决方案。

我知道如何使用JavaScript解决此问题-通过从容器元素（该段）中删除文本节点，如下所示：

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

但是，仅靠CSS就能解决这个问题吗？

阅读 614

2020-05-10

共1个答案

小编典典

由于此答案已变得非常流行，因此我将对其进行大量重写。

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

如何删除 内联块元素 之间的空间？我希望找到一种不需要篡改HTML源代码的CSS解决方案。 可以仅使用CSS来解决此问题吗？

这是有可能解决这个问题单独CSS，但目前还没有完全强大的CSS修复。

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

这在所有现代浏览器的最新版本中均有效。它可以在IE8中使用。它不会在Safari 5的工作，但它确实在Safari 6的Safari5的工作几乎是一个死的浏览器（0.33％，2015年8月）。

相对字体大小的大多数可能问题并不复杂解决。

但是，虽然这是一个合理的解决方案（如果您 特别需要 仅CSS的修复程序），但是如果您可以自由更改HTML（与我们大多数人一样），那么我不建议您这样做。

作为一名经验丰富的Web开发人员，我实际上是为解决此问题而做的：

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

恩，那就对了。我删除了inline-block元素之间HTML中的空白。

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

有时您确实必须仔细考虑空格的来源。 将用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>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>

或者，使用注释：

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

或者，如果您使用的是PHP或类似版本：

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

或者，您甚至可以完全跳过某些结束标记（所有浏览器都可以）：

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

现在，我已经用“用三十种方法将空白删除一千种不同方式”使您无聊了，希望您已经忘记了这一切font-size: 0。

2020-05-10