鉴于此HTML和CSS:
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}Run Code Online (Sandbox Code Playgroud)
<p>
<span> Foo </span>
<span> Bar </span>
</p>Run Code Online (Sandbox Code Playgroud)
结果,SPAN元件之间将存在4像素宽的空间.
演示: http ://jsfiddle.net/dGHFV/
我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:
<p>
<span> Foo </span><span> Bar </span>
</p>
Run Code Online (Sandbox Code Playgroud)
但是,我希望CSS解决方案不要求HTML源代码被篡改.
我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
Run Code Online (Sandbox Code Playgroud)
演示: http ://jsfiddle.net/dGHFV/1/
但是这个问题可以单独用CSS解决吗?
我正在使用一些div设置为display: inline-block并且有一组height和的s width.在HTML中,如果每个后面都有一个换行符,则会div在div的右下角添加一个自动5px边距.
例:
<div>Some Text</div>
<div>Some Text</div>
Run Code Online (Sandbox Code Playgroud)
有没有我忽略的财产可以让我重置自动保证金?
更新
从我发现的,没有办法删除边距...除非你要么在同一行上有所有内容,或添加注释以注释掉换行符.例:
<div>Some Text</div><!--
--><div>Some Text</div>
Run Code Online (Sandbox Code Playgroud)
不是最好的解决方案,但如果您有多行,仍然更容易阅读.