这些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。
当前回答
CSS Text Module Level 4规范定义了一个Text -space-collapse属性，它允许控制元素内部和周围的空白如何处理。
所以，关于你的例子，你只需要这样写:
p {
text-space-collapse: discard;
}
不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。
其他回答
使用PHP括号:
申力 显示屏:inline-block; 的 <德> < li > 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < /德>
CSS Text Module Level 4规范定义了一个Text -space-collapse属性，它允许控制元素内部和周围的空白如何处理。
所以，关于你的例子，你只需要这样写:
p {
text-space-collapse: discard;
}
不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。
在CSS中有一个简单的解决方案。例如:
HTML
<p class="parent">
<span class="children"> Foo </span>
<span class="children"> Bar </span>
</p>
CSS
.parent {
letter-spacing: -.31em;
*letter-spacing: normal;
*word-spacing: -.43em;
}
.children {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
}
在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。
你可以在这个链接中检查这个框架。享受:)
.row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background: #f9f9f9; padding: 1em .5em; } .col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; /* For better view */ padding: 16px; background: #dbdbdb; border: 3px #bdbdbd solid; box-sizing: border-box; width: 25%; } <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div>
我想我应该在这个问题上添加一些新的东西，尽管目前提供的许多答案都是足够的和相关的，有一些新的CSS属性可以实现非常干净的输出，在所有浏览器上完全支持，几乎没有“黑客”。这确实远离了内联块，但它给你的结果与问题要求的相同。
这些CSS属性是网格
CSS网格是高度支持的(CanIUse)，除了IE，它只需要一个-ms-前缀来允许它工作。
CSS Grid也是高度灵活的，它把表格、flex和内联块元素的所有好的部分都集中到一个地方。
创建网格时，可以指定行与列之间的间隔。默认间距已经设置为0px，但您可以将此值更改为任何您喜欢的值。
长话短说，这里有一个相关的工作示例:
身体{ 背景:lightblue; 字体类型:无衬线; ｝ .container { 显示:网格; Grid-template-columns: 100px; grid-column-gap: 0;/*不需要但有用，例如*/ grid-row-gap: 0;/*不需要但有用，例如*/ ｝ .box { 背景:红色; ｝ .box: nth-child(甚至){ 背景:绿色; ｝ < div class = "容器" > < div class = "盒子" > 你好 < / div > < div class = "盒子" > 测试 < / div > < / div >
在元素之间添加注释以避免出现空白。对我来说，这比将字体大小重置为零然后再设置回来要容易得多。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
