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

作者

鉴于此HTML和CSS：

span{
显示：内联块；
宽度：100px；
背景色：淡紫色；
}
&lt；p&gt；
&lt；span&gt；富&lt/span&gt；
&lt；span&gt；酒吧&lt/span&gt；
&lt/p&gt

因此，将有一个4；跨距元素之间像素宽的空间

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

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

&lt；p&gt；
&lt；span&gt；富&lt/span&gt&书信电报；span&gt；酒吧&lt/span&gt；
&lt/p&gt；

然而，我希望CSS解决方案不需要篡改HTML源代码

我知道如何用JavaScript解决这个问题——从容器元素（段落）中删除文本节点，如下所示：

//jQuery
$（'p'）.contents（）.filter（函数（）{返回this.nodeType==3；}）.remove（）；

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

但是，这个问题可以单独用CSS解决吗

因为这个答案已经很流行了，所以我正在改写它

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

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

仅用CSS就可以解决这个问题，但是没有完全健壮的CSS修复

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

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

这适用于所有现代浏览器的最新版本。它在IE8中工作。它在Safari 5中不起作用，但在Safari 6中起作用。Safari 5几乎是一个死气沉沉的浏览器（0.33%，2015年8月）

大多数与相对字体大小有关的可能问题并不复杂

然而，如果你特别需要一个CSS-only补丁，这是一个合理的解决方案，但如果你可以随意更改HTML（我们大多数人都是这样），我不建议你这么做

作为一名经验丰富的web开发人员，我实际上就是这样解决这个问题的：

&lt；p&gt；
&lt；span&gt；富&lt/span&gt&书信电报；span&gt；酒吧&lt/span&gt；
&lt/p&gt；

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

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

你有时必须仔细考虑空格将从哪里来。em>用JavaScript追加另一个元素是否会添加空白？否，如果操作正确，则不会

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

&lt；ul&gt；
&lt；李&gt；项目1&lt/李&gt；
&lt；李&gt；项目2&lt/李&gt；
&lt；李&gt；项目3&lt/李&gt；
&lt/ul&gt；

  • 你可以这样做，就像我通常做的那样：

    &lt；ul&gt；
&lt；李&gt；项目1&lt/李&gt&书信电报；李&gt；项目2&lt/李&gt&书信电报；李&gt；项目3&lt/李&gt；
&lt/ul&gt；

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

  • 或者，这是：

    &lt；ul&gt；
&lt；李&gt；项目1&lt/锂
&燃气轮机&书信电报；李&gt；项目2&lt/锂
&燃气轮机&书信电报；李&gt；项目3&lt/李&gt；
&lt/ul&gt；

  • 或者，使用注释：

    &lt；ul&gt；
&lt；李&gt；项目1&lt/李&gt&lt--
--&燃气轮机&书信电报；李&gt；项目2&lt/李&gt&lt--
--&燃气轮机&书信电报；李&gt；项目3&lt/李&gt；
&lt/ul&gt；

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

    &lt；ul&gt；
&lt；李&gt；项目1&lt/李&gt&书信电报；？
？&gt&书信电报；李&gt；项目2&lt/李&gt&书信电报；？
？&gt&书信电报；李&gt；项目3&lt/李&gt；
&lt/ul&gt；

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

    &lt；ul&gt；
&lt；李&gt；项目1
&lt；李&gt；项目2
&lt；李&gt；项目3
&lt/ul&gt；

现在，我已经走了，用“一千种不同的方法删除空白，三十点”让你厌烦死了，希望你已经完全忘记了font-size:0

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

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with