html - 网格系统和行内块间距

我刚刚看过http://csswizardry.com/2013/02/introducing-csswizardry-grids/及其演示(http://csswizardry.com/csswizardry-grids/)。我认为这是解决CSS中网格的一种很好的方法。因此，我检查了源代码以了解它是如何完成的，并且我看到了一件小事情，但我真的无法弄清楚它是如何完成的。

该网格系统未使用浮点数，而是使用了内联块元素，这是一件好事。但是，每当我将内联块用于百分比宽度的列/网格等时，我都会有此内联块间距。我知道有几种方法可以消除这种间距(大多数情况下只是更改HTML):http://css-tricks.com/fighting-the-space-between-inline-block-elements/

但是在网格系统中，我向您展示了这些修复程序(据我所知)都没有，并且如果您检查源代码，则根本没有行内块间距。只是为了向您展示我在这里主要遇到的问题，是一个 fiddle :http://jsfiddle.net/nN8mV/

的HTML

<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>

的CSS

.grid {
    margin-bottom: 20px;
}
    .grid__item {
        float: left;
        width: 33.3%;
        background: red;
    }
    .grid--inlineblock .grid__item {
        float: none;
        display: inline-block;
    }

您可能知道这一点，但是33.3％的宽度由于该间距而行不通。网格系统似乎也没有此问题，尽管它也使用“display:inline-block”。所以我的问题是:CSS Wizardy是如何解决这个问题的？我无法弄清楚，更改HTML(请参见上面的CSS Tricks链接)实际上并不是很经常，因为CMS生成的内容或其他内容无法适应HTML。

在此先感谢您的帮助。

最佳答案

您链接的Csswizardry的演示使用了注释html hack:

<div class="grid__item"></div><!--
--><div class="grid__item"></div>

检查他们的演示源。
还更新了您的jsfiddle

关于html - 网格系统和行内块间距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18657327/