即使使用了reset.css，也无法删除div之间的额外边距/填充

Question

在过去的 1.5 个小时里，我一直在尝试我所知道的一切，但无法解决这个问题。 实际上，据我所知，边距和填充为为0，但是，到目前为止，包含的div比包含的图像莫名其妙地宽了4px，高了1px。我不知道那是从哪里来的。

可能导致此问题的原因如下：

1. 我通过 javascript 将图像的最大宽度和最大高度设置为窗口的大小。
2. 我正在使用表格、表格单元格和内联块的组合来按照我需要的方式设置版式。
3. 还以 100% 宽度和高度处理 body 和 html
4. 这是一个 Tumblr 主题定制（不过从头开始）

代码方面，很难将全部内容放在这里，所以现在我只提供链接。

希望如果能弄清楚这一点，我将能够在这个问题中发布问题代码，以便将来参考。

链接：http://syndex.me

谢谢

Answer 1

你是说这个人吗？

.post.photo {
  display: inline-block;
  position: relative;
  height: 100%;
}

您可能不会看到边距，而是会看到文本空白。由于该 div 被定位为内联块，因此它的作用类似于内联元素，例如单词或 标签。如果您删除开始/结束

标记之间的空格，您的“边距”将会神奇地消失。

如果您使用 inline-block 进行定位，line-height: 0 和 font-size: 0 是您最好的朋友；它们关闭了所有有效的空白，尽管它们是非常丑陋的黑客。在大多数情况下，浮动是更好的解决方案。

请参阅 The Fashion Spot 上的 #column_content 和 #column 以查看内联块列在使用中。

Answer 2

div 之间有空格，因为您使用 display: inline-block 并且 div 之间由空格分隔。这就像您在不同的行上写字母一样：它们之间会出现一个空格。垂直空白的发生是出于同样的原因——图像显示为内联，并且浏览器为行高保留了一些空间。解决方案是对 div 使用 display: block 和 float: left，对图像使用 display: block。

Answer 3

在这种情况下，我无法使用 float:left 因为似乎没有可靠的方法来使用它来实现居中对齐的一系列 div。答案非常简单，内联阻塞、中心对齐的包装器/子序列中的任何标记之间都不需要有空格，并且应该包装在一行连续的代码中。相当愚蠢，但对于这种情况它 100% 有效。