问题描述
给定此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>或者，you can甚至完全跳过certain结束标签(所有浏览器都可以)：
<ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul>
现在我已经讲了一千种不同的删除空格的方法，希望您已经完全忘记了font-size: 0。
我已经讲了一千种不同的删除空格的方法。
这篇关于如何删除行内/行内块元素之间的空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！