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

【问题标题】：Cannot remove extra margin/padding between divs even though reset.css used [duplicate]即使使用了reset.css，也无法删除div之间的额外边距/填充[重复]
【发布时间】：2011-12-07 07:51:24
【问题描述】：

在过去的 1.5 小时里，我一直在尝试我所知道的一切，但无法弄清楚这一点。实际上，据我所知，margin 和 padding 为 0，但是，包含的 div 到目前为止，莫名其妙地比包含的图像宽 4px，高 1px。我不知道这是从哪里来的。

可能导致这种情况的几件事：

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

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

希望如果可以解决这个问题，我将能够在这个问题中发布问题代码，以便将来参考。

链接：http://syndex.me

谢谢

【问题讨论】：

在您的问题中可能值得注意的是，您网站上的图片人们在工作中浏览可能不安全。我想帮助你，但我不能在办公室的屏幕上看到它。 [编辑：澄清一下，这不是“色情”，但有一张基本上是裸体女人的大图]
很高兴我看到了你的评论@mwan，并不是有人关心这里，但这仍然会很尴尬。
对不起，伙计们。嗯，虽然不要删除它 :-) 是的，它不是色情，但它很活泼。

标签： html css computed-style

【解决方案1】：

你是说这个人？

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

您可能不是在查看边距，而是在查看文本空白。由于该 div 被定位为 inline-block 它就像一个内联元素，例如一个单词或一个 <strong> 标签。如果您删除开始/结束 <div> 标记之间的空格，您的“边距”将神奇地消失。

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

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

【讨论】：

我真的认为这样可以解决问题。该死。那些空间仍然存在。但是你说的有道理。我什至将这些 css 值放在 html、body {} 中，但仍然没有运气。我正在查看该属性空白，但没有“无”选项。
你总是可以使用这个技巧：

..

【解决方案2】：

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

【讨论】：

干杯，但这不会破坏我正在进行的中心对齐吗？
可以，但您仍然可以居中浮动。这是一个示例：jsfiddle.net/XeX8x
只要所有 div 的数量不超过一行，它就可以工作。换行后，它会回到左侧浮动。 jsfiddle.net/XeX8x/9 有趣。此外，在我的网站上，当它加载第一张图片时，它是居中的，但是一旦其他图片加载进去，它就会点击回到左边。我猜是因为它以某种方式打破了左右的概念？
你是对的，没有测试多行。我现在想不出其他任何东西，除了用 JS 去除空格的肮脏方式。你可以在这里看到一个例子：stackoverflow.com/questions/1539367/…
我只是手动剥离了它。现在可以了。虽然仍然有一个 1px 垂直空间来自另一个包装的 div（在点击时显示），但我相信我会弄清楚的。感谢您的帮助 Draevor！

【解决方案3】：

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

【讨论】：