相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

这不是第一次让我感到困惑.

<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

#wrap {
width:400px;
height:200px;
background:red;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.content {
width:100px;
height:200px;
display:inline-block;
background:green;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

在JSFiddle上查看时,您可能会有更好的理解

JSFiddle示例

根据我的理解,四个div应该完全适合父div,但它们之间有一个空间 - 我不明白它的来源.

如果有人能为我解决这个问题会很棒.

我有两个div

  <div>abc</div>
  <div>def</div>

用css作为这个

div{
  display:inline-block;
  padding:0px;
  margin:0px;
}

body{
   padding:0px;
   margin:0px;
}

我怎样才能消除第一和第二div之间的差距/空间

链接相同的http://cssdeck.com/labs/i5oysgmt