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

2022-08-19 00:00:00 html css flexbox

给定此HTML和CSS：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

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

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

因此，SPAN元素之间将有4个像素宽的空间( ；)。

演示：http://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况，我还知道我可以通过删除HTML源代码中span元素之间的空格来消除该空格，如下所示：

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

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

我知道如何使用JavaScript解决这个问题--通过从容器元素(段落)中删除文本节点，如下所示：

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

演示：http://jsfiddle.net/dGHFV/1/

但此问题是否可以仅使用CSS解决？

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

由于此答案已变得相当流行，我将对其进行重大重写。

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

如何删除内联块元素之间的空格？我希望对于不需要将HTML源代码被篡改了。仅使用css可以解决此问题吗？

仅使用CSS可以解决此问题，但没有完全可靠的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>

是的，没错。我删除了内联块元素之间的空格。

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

您有时确实必须仔细考虑空格将从何而来。是否会在另一个元素后追加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>

现在我已经讲了一千种不同的删除空格的方法，希望您已经完全忘记了font-size: 0。

我已经讲了一千种不同的删除空格的方法。

相关文章