- 或 -

Question

我在我的网站上使用mixItUp jQuery API。我对内联块元素的间距存在问题，主要是因为内联块增加了多余的空格。

通常情况下，我会使用删除html元素之间需要的空格，但由于html结果是动态生成的，我似乎无法做到这一点。构成搜索结果的html代码也在不同的＆＃34;搜索结果＆＃34;用于组织的PHP模板文件。

<div class="container">

   <!-- The three DIVs below are generated with PHP in a different template file -->
   <div class="result 1">Content</div>
   <div class="result 2">Content</div>
   <div class="result 3">Content</div>

</div>

所以问题是如何在这3个假设的DIV元素上删除内联块产生的空格？

请注意，我不想使用任何hacky CSS技巧，因为他们总是有支持相关的骗局（例如margin-right：-4px，font-size：0等）。

谢谢！

Answer 1

超级简单：

.container {
  font-size: 0;
}
.container > div {
  font-size: 1rem;
}

此选项将font-size设置为0，以便空白区域不占用空间。然后，它将font-size重置为带有font-size: 1rem的根级声明，用于所有直接子div。

- 或 -

<div class="container"><!--

   --><div class="result 1">Content</div><!--
   --><div class="result 2">Content</div><!--
   --><div class="result 3">Content</div><!--

--></div>

这只是在项目之间添加注释，以便您可以保留文档布局（用于编辑目的），同时基本上告诉浏览器忽略标记之间的所有内容。

删除动态生成的CSS内联块的html搜索结果之间的空格

1 个答案:

- 或 -