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

标签 html css computed-style

<分区>

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

可能导致这种情况的原因很少:

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

代码方面,很难将所有内容都放在这里,所以现在,我只提供链接。

希望如果能解决这个问题,我能把问题代码贴在这个问题里,以备日后引用。

链接:http://syndex.me

谢谢

最佳答案

你是说这个人?

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

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

如果您使用内联 block 进行定位,line-height: 0font-size: 0是你最好的 friend ;他们关闭了任何有效的空白,尽管他们是非常丑陋的黑客。在大多数情况下, float 是更好的解决方案。

请参阅 The Fashion Spot 上的#column_content 和#column查看正在使用的行内 block 列。

关于html - 即使使用了 reset.css,也无法删除 div 之间的额外边距/填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7760760/

相关文章:

html - 在 <td> 中垂直对齐图像旁边的文本

html - 如何让 TFOOT 只显示在表格的末尾

javascript - 如何添加另一个#div :before 上已经存在的内容

javascript - 将措辞的 CSS 值转换为数字

php - 尝试在 Facebook 应用程序中提交表单时出现 HTTP 404 错误

php - 如何使用 php 从 xpath 中获取结果?

javascript - GSAP 绩效和结构

jquery - 在单击的元素下显示右对齐的 div

css - CSS 动画中的计算值与指定值

javascript - 在 JavaScript 中获取计算的字体系列