使用 inline-block 列的网格系统并使用 javascript 删除 html 空白答案

【问题标题】：Grid system using inline-block column and remove html white space with javascript使用 inline-block 列的网格系统并使用 javascript 删除 html 空白
【发布时间】：2016-04-07 15:51:22
【问题描述】：

我写了一个类似引导的 CSS 网格系统，但我使用了内联块而不是左浮动块。当然，我需要一个技巧来删除行内块列之间的空白。我还写了一个小的纯javascript来做到这一点：

bodyzzz = document.getElementsByTagName("BODY")[0];
bodyzzz.innerHTML = body.innerHTML.replace(/>\s*\n*\r*\</g, '><');

我知道其他一些技巧可以删除空白，但它们仍然存在错误（或弱点）。那么，对于任何前端开发专家，我的技巧的弱点是什么？你们认为这个解决方案是最好的吗？

【问题讨论】：

标签： javascript html css removing-whitespace

【解决方案1】：

我假设在将一个 div 放在另一个 div 下方时，空格是由于换行符造成的

这是一种消除空格的方法

sn-p

div {
  display:inline-block;
  border:solid;
  width:100px;
  height:100px;
  margin:none;
  padding:0;
}

<div>
Content1
</div><div>
Content2
</div><div>
Content3
</div>

注意开始的 div 标签和它们前面的 div 标签结尾是如何在同一行的

编辑：更好的方法是将 css 显示设置为 display:table-cell;

这是另一个sn-p

div {
  display:table-cell;
  border:solid;
  width:100px;
  height:100px;
  margin:none;
  padding:0;
}

<div>
Content1
</div>
<div>
Content2
</div>
<div>
Content3
</div>

【讨论】：

谢谢，先生。但是我使用 sublime text 和 Beautify 插件来编写 html，你的方式让代码看起来很糟糕。当我们让javascript完成工作时会更好。我意识到如果网页里面有 html 代码的内容，我的技巧会破坏该内容。
我明白 :D..answer 已编辑为带有 display:table-cell 的样式，避免了那种丑陋的格式
我明白了。但我正在使用 inline-block，它是最强大的网页布局工具（兼容性、左右对齐、居中对齐、倒序......）。我想知道它对网络性能有什么影响，或者很难识别。
顺便说一句，我意识到如果内容在预标签内，我的技巧不会破坏内容：D
我的技巧在 html 加载后运行，所以我们会看到它从丑陋的页面（仍然有空白）捕捉到更好的页面（删除了空白），这很快但它仍然可见。更好的解决方案是将包装器的字体大小设置为 0.001px，并在内部元素上将其重置为 16px！