这些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。
当前回答
在元素之间添加注释以避免出现空白。对我来说，这比将字体大小重置为零然后再设置回来要容易得多。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
其他回答
p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >
如果你正在使用Twig模板引擎，你可以使用无空格:
<p>
{% spaceless %}
<span>Foo</span>
<span>Bar</span>
{% endspaceless %}
</p>
请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。
在container元素中添加white-space: nowrap:
CSS:
* {
box-sizing: border-box;
}
.row {
vertical-align: top;
white-space: nowrap;
}
.column{
float: left;
display: inline-block;
width: 50% // Or whatever in your case
}
HTML:
<div class="row">
<div class="column"> Some stuff</div>
<div class="column">Some other stuff</div>
</div>
这是普伦克。
不过，严格来说，这并不是问题的答案: “如何删除内联块元素之间的空格?”
您可以尝试flexbox解决方案并应用下面的代码，空格将被删除。
p {
display: flex;
flex-direction: row;
}
你可以在这个链接上了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
从内联块元素中移除空格，有很多方法:
字体大小为0 nav { 字体大小:0; ｝ 导航a { 字体大小:16 px; ｝ 消极的保证金 Div a { 显示:inline-block; margin-right: 4 px; ｝ 跳过结束标签 < ul > <李>一 <李>两个 <李>三 < / ul > 使用注释: < ul > <李>第1项李< / > < !-- 李——> < >第二项李< / > < !-- 李- > < > 3项李< / > < / ul >
