2

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

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

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

代码方面，很难把所有的东西都放在这里，所以现在，我只给出链接。

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

链接：http ://syndex.me

谢谢

4

3 回答 3

11

你是说这个人？

.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以查看正在使用的内联块列。

于 2011-10-13T21:53:11.937 回答
2

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

于 2011-10-13T21:53:03.800 回答
1

In this case, i could not use float:left as there seems to be no reliable way to achieve center aligned series of divs using it. The answer is pretty simple, any mark-up within the inline-blocked, center aligned wrapper/child sequence needs to have no white space in between them, and should be wrapped in one continuous line of code. Pretty stupid, but it works 100% for this scenario.

于 2011-10-14T00:20:19.750 回答