这些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。
当前回答
今天，我们应该只使用Flexbox。
旧的回答:
好吧，尽管我已经投票赞成font-size: 0;和未实现的CSS3特性的答案， 经过尝试，我发现没有一个是真正的解决方案。
实际上，没有一种解决方法没有强烈的副作用。
然后我决定从我的HTML源代码(JSP)中删除内联块div之间的空格(这个答案是关于这个参数的)， 把这个:
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
这个
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
这很难看，但很管用。
但是，等一下……如果我生成我的div在Taglibs循环(Struts2, JSTL等…)?
例如:
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
这是绝对不可想象的内联所有的东西，这将意味着
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
这是不可读的，难以维护和理解，等等。
我找到的解决办法是:
使用HTML注释将一个div的结束连接到下一个div的开始!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
通过这种方式，您将获得可读且缩进正确的代码。
而且，作为一个积极的副作用，HTML源代码虽然充斥着空洞的注释， 将导致正确缩进;
我们来看第一个例子。在我看来，这一点:
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
比这个好:
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
其他回答
我在React和Sass的一个Free Code Camp项目中尝试了字体大小:0的解决方案来解决类似的问题。
它确实有效!
首先，脚本:
var ActionBox = React.createClass({
render: function() {
return(
<div id="actionBox">
</div>
);
},
});
var ApplicationGrid = React.createClass({
render: function() {
var row = [];
for(var j=0; j<30; j++){
for(var i=0; i<30; i++){
row.push(<ActionBox />);
}
}
return(
<div id="applicationGrid">
{row}
</div>
);
},
});
var ButtonsAndGrid = React.createClass({
render: function() {
return(
<div>
<div id="buttonsDiv">
</div>
<ApplicationGrid />
</div>
);
},
});
var MyApp = React.createClass({
render: function() {
return(
<div id="mainDiv">
<h1> Game of Life! </h1>
<ButtonsAndGrid />
</div>
);
},
});
ReactDOM.render(
<MyApp />,
document.getElementById('GoL')
);
然后是萨斯:
html, body
height: 100%
body
height: 100%
margin: 0
padding: 0
#mainDiv
width: 80%
height: 60%
margin: auto
padding-top: 5px
padding-bottom: 5px
background-color: DeepSkyBlue
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#buttonsDiv
width: 80%
height: 60%
margin: auto
margin-bottom: 0px
padding-top: 5px
padding-bottom: 0px
background-color: grey
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#applicationGrid
width: 65%
height: 50%
padding-top: 0px
margin: auto
font-size: 0
margin-top: 0px
padding-bottom: 5px
background-color: white
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#actionBox
width: 20px
height: 20PX
padding-top: 0px
display: inline-block
margin-top: 0px
padding-bottom: 0px
background-color: lightgrey
text-align: center
border: 2px solid grey
margin-bottom: 0px
字体大小:0;管理起来可能有点棘手…
我认为下面的几行代码比其他任何方法都更好，更可重用，更节省时间。我个人使用这个:
.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}
/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}
那么你可以这样使用它…
<ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
据我所知(我可能错了)，但所有浏览器都支持这个方法。
解释:
这工作(也许-3px可能更好)完全按照您的预期工作。
复制并粘贴代码(一次) 然后在HTML中，只需在每个内联块的父类上使用class="items"。
您将不需要回到css，并为您的新内联块添加另一个css规则。
同时解决两个问题。
还要注意>(大于号)，这意味着*/all子元素应该是内联块。
http://jsfiddle.net/fD5u3/
注意:我已经进行了修改，以适应当包装器有子包装器时继承字母间距。
如果你正在使用Twig模板引擎，你可以使用无空格:
<p>
{% spaceless %}
<span>Foo</span>
<span>Bar</span>
{% endspaceless %}
</p>
请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。
这是相同的答案，我给了相关的:显示:内联块-什么是空间?
实际上，有一种非常简单的方法可以从内联块中删除空白，既简单又语义化。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时，由浏览器为内联元素添加)。一旦你声明了字体，你只需要在容器上改变font-family，然后在子容器上再改变，瞧。是这样的:
@font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
很合口味。这里是我刚刚在font-forge中制作的字体下载，并使用FontSquirrel webfont generator进行转换。我只花了5分钟。css @font-face声明包括:压缩零宽度空格字体。它在谷歌驱动器，所以你需要点击文件>下载保存到你的电脑。如果您将声明复制到主css文件中，您可能还需要更改字体路径。
只是为了好玩:一个简单的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 >
