CSS在特定情况下删除空格答案

【问题标题】：CSS removing white space in a specific situationCSS在特定情况下删除空格
【发布时间】：2012-01-25 17:59:52
【问题描述】：

看看这个。

当你点击右下框的主体时，“TOO”被附加到ul并向上动画。这导致空白被添加到#window-frame。我不想要这个。我希望“TOO”和“NEXT ITEM”之间没有间隙。这可以使用 CSS 完成吗？我宁愿不要用 JS 愚弄高度。另外，您对为什么会发生这种情况有任何见解吗？

谢谢

【问题讨论】：

【解决方案1】：

尝试使用margin-top 而不是为top 属性设置动画：

$('#latest-image-list').animate({marginTop: "-=20"}, "fast");

另外，附带说明一下，您创建了 height 变量，而没有将其置于全局范围内的 var 语句（否则它将在 window.load 事件处理程序范围内）。始终使用var 以确保您不会不必要地创建全局变量（这会在每次查找变量时产生额外的开销）。

【讨论】：

不客气。我只是再次查看代码并注意到新添加的列表项是30px 高，而您只是将<ul> 元素的高度减少了20px，这意味着每次单击都会推动“下一项”发短信10px。

【解决方案2】：

如果列表必须相对定位，动画marginTop而不是top。

【讨论】：

【解决方案3】：

这应该说明：http://jsfiddle.net/DTxQf/32/

MOO 在哪里？不可见（在顶部折叠下），但仍然存在。
尽管将列表向上平移了 20 像素，但仍占用相同的空间。

【讨论】：