Chrome 和 Firefox 中的 UL 余量过大

Posted 2023-03-06

【中文标题】Chrome 和 Firefox 中的 UL 余量过大

【英文标题】：Excessive UL margin in Chrome and Firefox

【发布时间】：2012-04-03 00:01:47

【问题描述】：

在我的 html 中，我生成了一个 ul 元素，其中包含 li 和 img。

除了 css 定义的边距之外，我的 li 之间还有一个奇怪的 3px（大约）过度边距。

这是 Chrome 调试控制台快照。多余的区域用红色勾勒出来：

uls 样式如下：

li的风格是：

在 Firefox 中出现完全相同的过度边距。

为什么会在那里？我该如何摆脱它？

【问题讨论】：

这似乎是一个错误。使用 HTML5 拖动时，边距也会被删除(As seen in this article)，如果不删除，会导致一些奇怪的退缩。

【参考方案1】：

解决了。这就是浏览器在 li 之间呈现换行符的方式。不得不强制 html 生成器在一行中渲染所有 li 以删除它们之间的空格。