这些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。
当前回答
跨度{ 显示:inline-block; 宽度:50 px; 背景:蓝色; 字体大小:30 px; 颜色:白色; text-align:中心; ｝ < p > < span > Foo < / span > < span >栏< / span > < / p >
其他回答
跨度{ 显示:inline-block; 宽度:50 px; 背景:蓝色; 字体大小:30 px; 颜色:白色; text-align:中心; ｝ < p > < span > Foo < / span > < span >栏< / span > < / p >
CSS Text Module Level 4规范定义了一个Text -space-collapse属性，它允许控制元素内部和周围的空白如何处理。
所以，关于你的例子，你只需要这样写:
p {
text-space-collapse: discard;
}
不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。
从内联块元素中移除空格，有很多方法:
字体大小为0 nav { 字体大小:0; ｝ 导航a { 字体大小:16 px; ｝ 消极的保证金 Div a { 显示:inline-block; margin-right: 4 px; ｝ 跳过结束标签 < ul > <李>一 <李>两个 <李>三 < / ul > 使用注释: < ul > <李>第1项李< / > < !-- 李——> < >第二项李< / > < !-- 李- > < > 3项李< / > < / ul >
每个问题，试图删除内联块之间的空间似乎像一个<table>给我…
试试这样做:
p { 显示:表; ｝ 跨度{ 宽度:100 px; 边框:1px实心银;/*仅用于可视化*/ 显示:表格单元; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
只是为了好玩:一个简单的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 >
