这些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。


当前回答

从内联块元素中移除空格,有很多方法:

字体大小为0 nav { 字体大小:0; } 导航a { 字体大小:16 px; } 消极的保证金 Div a { 显示:inline-block; margin-right: 4 px; } 跳过结束标签 < ul > <李>一 <李>两个 <李>三 < / ul > 使用注释: < ul > <李>第1项李< / > < !-- 李——> < >第二项李< / > < !-- 李- > < > 3项李< / > < / ul >

其他回答

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

实际上,有一种非常简单的方法可以从内联块中删除空白,既简单又语义化。它被称为具有零宽度空格的自定义字体,它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时,由浏览器为内联元素添加)。一旦你声明了字体,你只需要在容器上改变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文件中,您可能还需要更改字体路径。

简单:

item {
  display: inline-block;
  margin-right: -0.25em;
}

不需要触及父元素。

这里唯一的条件是:项目的font-size必须没有定义(必须等于父项的font-size)。

0.25em是默认的字间距

W3Schools -字间距属性

我最近一直在解决这个问题,而不是设置父字体大小:0,然后将子设置回一个合理的值,我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。

在另一个帖子中,我看到一位评论者提到,font-size:0并不总是理想的,因为人们可以在浏览器中控制最小字体大小,完全否定了将字体大小设置为0的可能性。

无论指定的字体大小是100%、15pt还是36px,使用ems都可以正常工作。

http://cdpn.io/dKIjo

p { 显示:flex; } 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; } < p > <span> hello </span> <span> world </span> < / p >

我发现的另一种方法是将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;
}