相关疑难解决方法(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解决吗？

如何摆脱列表项之间的空白区域？我试图让图像紧挨着彼此.即使我已经设置了样式margins: 0;,它们仍然是分开的.

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

我有以下HTML;

li 
{
    list-style: none;
    border: solid 1px blue;
    display: inline;
    margin: 0px 0px 0px 0px;
}
...
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

当我在他们自己的行上添加列表项时,它们之间会出现一个水平空格,但是当我这样做时;

<li>Item 1</li><li>Item 2</li><li>Item 2</li>

他们不.

无论如何都要阻止新线显示为空白区域,还是需要使用负边距？

使用时为什么div之间有空格display: inline-block,如下例所示:http://jsbin.com/IhULuZO/1/edit.

我知道我可以使用float:left,但如果可能的话,我想摆脱没有浮动元素的空白区域.