这些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。
当前回答
我发现的另一种方法是将margin-left作为除行第一个元素外的负值。
span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}
其他回答
所以有很多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距(根据元素的位置，可以是左边距或右边距)。
不过，严格来说，这并不是问题的答案: “如何删除内联块元素之间的空格?”
您可以尝试flexbox解决方案并应用下面的代码，空格将被删除。
p {
display: flex;
flex-direction: row;
}
你可以在这个链接上了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
使用其中一个技巧
删除空格 消极的保证金 跳过结束标签(HTML5不在乎) 将字体大小设置为0(字体大小为0的空格是…零宽度) 使用flexbox
请看下面的代码:
body { font-family: sans-serif; font-size: 16px; } ul { list-style: none } li { background: #000; display: inline-block; padding: 4px; color: #fff; } ul.white-space-fix li { margin-right: -4px; } ul.zero-size { font-size: 0px; } ul.zero-size li { font-size: 16px; } ul.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } original... <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Funky code formatting... <ul> <li> one</li><li> two</li><li> three</li> </ul> Adding html comments... <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul> CSS margin-right: -4px; <ul class="white-space-fix"> <li>one</li> <li>two</li> <li>three</li> </ul> Omitting the </li> <ul> <li>one <li>two <li>three </ul> fixed with font-size: 0 <br><br> <ul class="zero-size"> <li>one</li> <li>two</li> <li>three</li> </ul> <br> flexbox <br> <ul class="flexbox"> <li>one</li> <li>two</li> <li>three</li> </ul>
今天，我们应该只使用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
