inline-block DIV元素之间有额外的空间

Question

我正在使用CSS列布局模块创建流式布局，但是在同一列的两个或更多元素之间会出现意外的结果。元素之间会出现3到4像素的间隙。我已经在IE11、FireFox 24、Chrome 31和Safari 5.1.7中进行了测试，它们都表现出相同的行为。

<div class="tile-container">
    <div class="tile-large">1</div>
    <div class="tile-wide">2</div>
    <div class="tile-small">3</div>
    <div class="tile-small">4</div>
    <div class="tile-small">5</div>
    <div class="tile-small">6</div>
    <div class="tile-wide">7</div>
    <div class="tile-large">8</div>
</div>

.tile-container {
    -moz-column-width: 250px;
    -webkit-column-width: 250px;
    column-width: 250px;
    column-fill: auto;
    height: 502px;
    background-color: gray;
}

.tile-large {
    width: 250px;
    height: 250px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: green;
}

.tile-wide {
    width: 250px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: blue;
}

.tile-small {
    width: 125px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: red;
}

我不想使用负边距来关闭间隙，因为我想引入拖放行为。左浮动将消除间隙，但这会引入另一组问题。有趣的是，当我使用jQueryUI sortable时，在拖放事件之后，jQueryUI排列元素后，间隙不再存在。

- Rob J

---

外边距/内边距/边框？ - Marc B

这是由于您的内联块元素之间存在“看不见”的空格导致的结果。如果您删除div之间的换行符，间隙也将被移除。请参考相关解决方法的副本。 - Travis J

@TravisJ 感谢你的帮助，你提供的那篇文章非常准确。 - Rob J

-1 在StackOverflow上有大约100个关于同样问题的问题。你可以参考这里的解决方法：http://css-tricks.com/fighting-the-space-between-inline-block-elements/。 - Josh Powell

Answer 1

你需要将元素之间的空格注释掉，像这样：

You need to comment out the white space between the elements, like so:

<div class="tile-container">
       <div class="tile-large">1</div><!--
    --><div class="tile-wide">2</div><!--
    --><div class="tile-small">3</div><!--
    --><div class="tile-small">4</div><!--
    --><div class="tile-small">5</div><!--
    --><div class="tile-small">6</div><!--
    --><div class="tile-wide">7</div><!--
    --><div class="tile-large">8</div>
</div>

示例：http://jsfiddle.net/P7cbA/11/

另一种方法是在HTML中将元素放在一行中，它们之间没有任何空格，但这样会降低代码可读性：

<div class="tile-container">
       <div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>

- Arbel

---

好的建议。这在任何重复的答案中都没有提到。+1 为独特性。 - Travis J

@Arbel 你太棒了，谢谢。 - Rob J

@RobJacobs 很高兴能帮助你！ - Arbel

Answer 2

您看到的是div元素之间的空格。从您的HTML中删除这些空格，或将容器的字体大小设置为零，以便不呈现这些空格。

.tile-container {
    font-size: 0
}
.tile-container > div {
    font-size: 14px; /* Or whatever you like. */
}

- Mike M. Lin

---

我更喜欢这个解决方案，因为来自 css-tricks.com 的建议说负边距的值取决于父元素的字体大小。 - jroi_web

Answer 3

那个问题是在inline-block元素之间生成的white-space。避免这种情况的其中一种方法是添加负边距：

.tile-large, .tile-wide, .tile-small {
  display:inline-block;
  margin-right:-4px;
}

_{该值可以根据父元素的字体大小而改变}

演示 http://jsfiddle.net/P7cbA/7/

有更多选项可用于删除这个空间，选择最适合您口味的选项，您可以查看一篇好文章 http://css-tricks.com/fighting-the-space-between-inline-block-elements/

- DaniP