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

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

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ Foo Bar

小提琴演示

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

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

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

修改HTML。 JavaScript。

当前回答

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

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

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

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

其他回答

为什么不像这样……有点粗糙，取决于你的CSS单元代码，但是:

.my-span {
    position: relative;
    left: -1em;
    width: 1em;
}

<span>...</span><span class="my-span"></span>

CSS Text Module Level 4规范定义了一个Text -space-collapse属性，它允许控制元素内部和周围的空白如何处理。

所以，关于你的例子，你只需要这样写:

p {
  text-space-collapse: discard;
}

不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。

这个问题最简单的答案是相加。

css

float: left;

代码依赖链接:http://jsfiddle.net/dGHFV/3560/

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

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

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

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

消极的保证金

你可以用负4px的边距将元素移回原位(可能需要根据父字体大小进行调整)。显然，这在旧的IE(6和7)中是有问题的，但如果你不关心这些浏览器，至少你可以保持代码格式干净。

span {
  display: inline-block;
  margin-right: -4px;
}

推荐文章