这些span元素之间将有一个4像素宽的空间:

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; } < p > <span> Foo </span> <span> Bar </span> < / p >

小提琴演示

我知道我可以通过删除HTML中span元素之间的空白来摆脱这个空间:

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

我正在寻找一个CSS解决方案,不涉及:

修改HTML。 JavaScript。


当前回答

这是相同的答案,我给了相关的:显示:内联块-什么是空间?

实际上,有一种非常简单的方法可以从内联块中删除空白,既简单又语义化。它被称为具有零宽度空格的自定义字体,它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时,由浏览器为内联元素添加)。一旦你声明了字体,你只需要在容器上改变font-family,然后在子容器上再改变,瞧。是这样的:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

很合口味。这里是我刚刚在font-forge中制作的字体下载,并使用FontSquirrel webfont generator进行转换。我只花了5分钟。css @font-face声明包括:压缩零宽度空格字体。它在谷歌驱动器,所以你需要点击文件>下载保存到你的电脑。如果您将声明复制到主css文件中,您可能还需要更改字体路径。

其他回答

不过,严格来说,这并不是问题的答案: “如何删除内联块元素之间的空格?”

您可以尝试flexbox解决方案并应用下面的代码,空格将被删除。

p {
   display: flex;
   flex-direction: row;
}

你可以在这个链接上了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我发现的另一种方法是将margin-left作为除行第一个元素外的负值。

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

所有用于显示的空间消除技术:内联块是讨厌的hack…

使用Flexbox

它很棒,解决了所有的内联块布局问题,截至2017年有98%的浏览器支持(如果你不关心旧的ie,更多)。

我们准备好使用Flexbox了吗? 使用CSS灵活的盒子- Web开发人员指南| MDN Flexbox | CSS-Tricks的完整指南 Flexy Boxes - CSS flexbox游乐场和代码生成工具

对于符合CSS3的浏览器,有空白崩溃:丢弃

见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing

有很多解决方案,如字体大小:0,字间距,左距,字母间距等等。

通常我更喜欢使用字母间距,因为

当我们分配一个大于额外空间宽度的值时,这似乎是可以的。1 em)。 然而,当我们设置更大的值如-1em时,word-spacing和margin-left就不合适了。 当我们尝试使用em作为字体大小单位时,使用font-size并不方便。

所以,字母间距似乎是最好的选择。

但是,我必须警告你

当你使用字母间距时,最好使用-0.3em或-0.31em,而不是其他的。

* { margin: 0; padding: 0; } a { text-decoration: none; color: inherit; cursor: auto; } .nav { width: 260px; height: 100px; background-color: pink; color: white; font-size: 20px; letter-spacing: -1em; } .nav__text { width: 90px; height: 40px; box-sizing: border-box; border: 1px solid black; line-height: 40px; background-color: yellowgreen; text-align: center; display: inline-block; letter-spacing: normal; } <nav class="nav"> <span class="nav__text">nav1</span> <span class="nav__text">nav2</span> <span class="nav__text">nav3</span> </nav>

如果你正在使用Chrome(测试版本66.0.3359.139)或Opera(测试版本53.0.2907.99),你看到的可能是:

如果你使用的是Firefox(60.0.2)、IE10或Edge,你看到的可能是:

这很有趣。所以,我检查了mdn-letter-spacing,发现了这个:

长度 指定除了默认字符间距之外的额外字符间距。值可能是负的,但可能存在特定于实现的限制。用户代理不能为了使文本正确而进一步增加或减少字符间的空间。

看来这就是原因。