Div 不会使用自动高度和内部图像完全自动调整大小答案

【问题标题】：Div won't auto size completely with auto height and inner ImageDiv 不会使用自动高度和内部图像完全自动调整大小
【发布时间】：2012-08-19 00:01:05
【问题描述】：

我有一个很大的绝对 div，其中包含一个较小的相对 div。较小的 div 使用 height:auto 包装图像 (png) 和自动尺寸。一切正常。但是在一个特定的站点上，我在调整大小后在较小的 div 底部获得了 5px 的额外间距，就像它计算出所需的高度一样？我假设我以某种方式从影响我的调整大小和 div 容器的站点继承了一些东西。

我重新设计了所有内容，清除浮动、溢出、交替定位、删除自动选项、流等，但我似乎无法摆脱底部的 5px 额外，并且它只在那个网站上？

我的问题 - 你如何调试你的高度或自动高度问题，你知道是什么原因造成的吗？

谢谢，克里斯

【问题讨论】：

发布一些代码或制作小提琴
几乎不可能在没有看到您的代码的情况下回答您的问题。您可以在 jsfiddle.net 上设置演示。请不要发布所有代码，只发布相关部分。
会不会和图片内联有关？类似in this answer.
@Chris 不要忘记选择“接受的答案”！而且，欢迎来到 StackOverflow :)

标签： html css resize height

【解决方案1】：

我会使用 Chrome 的 Inspect Element 之类的东西，并查看影响它的 css 规则。

然后您可以检查所有元素并即时启用/禁用以查看影响它的因素。

https://developers.google.com/chrome-developer-tools/

【讨论】：

FF的Firebug插件更有效更友好，imo

【解决方案2】：

试试

font-size:0;
line-height:0

对于较小的 div

例如http://jsfiddle.net/U9z5K/14/

或者使用

display:block;

图片

【讨论】：

或者使用float: left;作为img edited jsfiddle

【解决方案3】：

在容器 div 上：

line-height: 0px; 将消除由空白引起的任何高度增加。

padding: 0px; 将消除容器 div 内部的填充。

在图片上

margin: 0px 将消除图像外部周围添加的任何空间。

您能否将我们指向该站点或 jsfiddle，以便我们更好地了解正在发生的事情？正如@RyanMcDonough 提到的，Chrome 的 Inspector 很棒。在 IE 中，您有 IE 开发人员工具栏。在 FF 中你可以使用 Firebug（这是一个经典！）。

【讨论】：

谢谢，line-height 解决了。我正在使用 Firebug，但看不到它。
是的。 line-height 不会出现在萤火虫检查中，因为它并不真正被视为布局属性。这是布局调试的“陷阱”之一