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

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>
    
  • 或者,you can甚至完全跳过certain结束标签(所有浏览器都可以):

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

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

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

相关文章