如何消除内联元素之间的空格可见性？

Question

假设我有几个类似于以下的 inline-block div 标签：

<div class="image">

</div>
<div class="image">

</div>

class image 只是将它们的大小设置为100x100和灰色背景颜色。它们的边距和边框都设置为0，但两个矩形之间仍然有间隔。

然而，如果我像这样编写HTML：

<div class="image">

</div><div class="image">

</div>

在div之间删除所有空格，间距就会消失。

由于我不想这样编写我的HTML，所以我认为必须有一种使用CSS去除空格的方法。只要它的可见性被移除，我不在乎空格是被删除、隐藏还是缩小。

感谢任何帮助

---

按照要求，JSFiddle: http://jsfiddle.net/6h3Jx/

---

已更新word-spacing：http://jsfiddle.net/6h3Jx/1/

- Hubro

---

这很奇怪，你有现场示例吗？另外，你在测试哪个浏览器？ - Kyle

这不应该按照你所说的发生... 你能否提供一个 jsfiddle 的例子？ - kobe

更新了带有JSFiddle链接的问题。 - Hubro

@josh-crozier 对不起，但是这个问题比那个问题早两年，为什么会被认为是重复的？ - Hubro

Answer 1

这是一个内联元素的行为，所以尝试向左浮动。http://jsfiddle.net/aVrSx/

- kuyabiye

---

我无法同时将元素向左浮动和居中。至少我还没有想出如何做到 - 有什么建议吗？ - Hubro

你想让这些元素在容器中居中吗？ - kuyabiye

我希望它们居中，并且如果元素超出容器的宽度，则换到下一行。 inline-block 很适合这个完美的任务 :) - Hubro

Answer 2

您可以将"display: flex;"属性设置给它们的父级包装容器：

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

- user2711081

Answer 3

将以下内容放在父元素上：

word-spacing:-4px;

或者尝试：

font-size:0px;

它可能会更好地工作，因为它不会受到文本调整大小的影响。

- Ivan

---

那什么也没做 :-) - Hubro

是的，我忘记了 word-spacing:0; 是默认值。-4px 应该可以解决问题。然而，这会受到文本调整大小的影响，所以我在我的答案中添加了第二个解决方案。 - Ivan

还有一个值会阻止font-size:0px;被继承到层次结构下吗？编辑：无论如何，font-size的解决方案都不起作用：http://jsfiddle.net/6h3Jx/1/ - Hubro

不行，唯一的解决方案就是像这样：.nowhitespace{font-size:0px;} nowhitespace > * { font-size:12px;} - Ivan