这些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
float: left;
代码依赖链接:http://jsfiddle.net/dGHFV/3560/
其他回答
只是为了好玩:一个简单的JavaScript解决方案。
document.querySelectorAll (.container) .forEach(清晰); 函数clear(element) { element.childNodes。forEach(检查、元素); ｝ 功能检查(项){ 如果项目。nodeType === 3) this. removecchild (item); ｝ 跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ < p class = "容器" > <span> Foo </span> <span> Bar </span> < / p >
试试这个片段:
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
margin-right: -3px;
}
工作演示:http://jsfiddle.net/dGHFV/2784/
不过，严格来说，这并不是问题的答案: “如何删除内联块元素之间的空格?”
您可以尝试flexbox解决方案并应用下面的代码，空格将被删除。
p {
display: flex;
flex-direction: row;
}
你可以在这个链接上了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
所以有很多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距(根据元素的位置，可以是左边距或右边距)。
p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >
