html - 避免网站垂直 block 中的空格

Question

我想了解如何更改网站中的小东西，但我不知道该怎么做。 我有一个分为两列的文章网格，我希望将各个 block 分开，避免出现空白，如图 http://i.stack.imgur.com/tNCFd.png 所示。 但是我不知道应该设置哪种属性。

Answer 1

编辑 - 澄清答案(在评论中澄清问题)

父主题中有一条规则:

#content .post { margin-bottom: 12px; }

您需要在您的子主题中覆盖此规则并设置

#content > div.articolo .post { margin-bottom:0; }

原始答案

首先，我强烈建议您不要在一个可以用简单 CSS 修复的元素中扔一个沉重的 jQuery 库(即砌体)。

其次，根据您评论中的代码 - 这是这样的:

#content div.articolo { display:inline-block; clear:none; min-height: 10px; } 
#content > div.articolo:nth-child(even) { width:48%; float:left; clear:both; } 
#content > div.articolo:nth-child(odd) { width:48%; float:right; } 
#content > div.articolo:first-child { width:100%; float:none; clear:both; }

你应该把它改成这样:

#content div.articolo { display:block; clear:none; min-height: 10px; } 
#content > div.articolo:nth-child(even) { width:50%; float:left; clear:both; } 
#content > div.articolo:nth-child(odd) { width:50%; float:right; } 
#content > div.articolo:first-child { width:100%; float:none; clear:both; }

请注意，我唯一更改的是 width(更改为 50%)并且我将 display: inline-block 更改为 display: block

display: inline-block 保留标记中的空格(将多个转换为一个)，因此如果您在标记中的结束 div 之后有一个空格 display: inline-block，你会在浏览器中看到一个空格。很有可能，这就是开发人员将宽度设置为 48% 的原因，以(不好地)说明每个文章 block 之后出现一个空格的事实(因为它是 display: inline -block) 意味着每个 block 不能设置为 50% 宽度，因为那样它们就不会彼此相邻出现(因为 50% + 50% + 空格 > 100%)