相关疑难解决方法(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> 都有一个班级clearfix.

经过快速谷歌搜索,我了解到它有时适用于IE6,但实际上是什么是一个clearfix？

与没有clearfix的布局相比,您能提供一些带有clearfix的布局示例吗？

可能重复:
内联块列表项中的不需要的边距
如何从HTML中删除"不可见空间"

为什么内联块列表项中有空格？无论我如何将我的列表项目放入菜单,我总是得到空格.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

我有三个divs水平并排堆叠在一起,这些div设置为显示:inline-block.但是,我注意到即使使用某种CSS重置,它们之间也会产生4px的小距离？为什么会这样？有没有办法全局摆脱这种情况发生或我只需要将div移到左边-4px？

DEMO

请仔细阅读问题.它与如何删除内联块元素之间的空间不同.

请考虑以下示例:

HTML:

body {
  /* font-family: Arial; */
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 20px;
}

CSS:

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

产生:

但是,如果我补充:

body {
  font-family: Arial;
}

它导致第二个和第三个按钮之间的空间为1px:

现在的问题是:为什么增加font-family的body影响按键之间的空间？

这里的游乐场