当表格位于 LI 元素内时，我发现表格的边距行为非常奇怪。在 LI 内部，TABLE 在顶部有额外的边距，不能通过使用“边距”或“填充”CSS 样式来取消。取消它的唯一方法是为 LI 设置“display: block”(默认情况下它是“display: list-item”)。这是代码:
<!DOCTYPE html>
<html>
<head>
<title>Strange table margin behaviour</title>
</head>
<body>
<ul>
<li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
<li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
<li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
</ul>
</body>
</html>
这在谷歌浏览器中呈现为:
我希望:
我真的不明白为什么会出现这种 margin ？ LI本身没有任何paddings，TABLE没有任何margins，但是合在一起...
更新。此边距仅出现在 Google Chrome (24.0.1312.68) 中。在 Mozilla Firefox (18.0.2) 中没有边距，页面看起来符合预期(屏幕截图 #2)。
最佳答案
虽然我认为更好的实现方式是在 li 标签内使用 float div 来容纳您的表单，但解决您在 HTML 设置中看到的间距问题的方法是添加一个 display: inline-table 样式到 table 标签。 (下面复制的代码；请注意，我将 CSS 移到了标题中，而不是内嵌在标签中。)
请注意:IE 7 及以下版本完全不支持 inline-table 属性，您需要注意 IE 8 中的文档类型。这在 FF、Chrome 和 IE 中应该可以正常工作9.
参见:http://www.w3schools.com/cssref/pr_class_display.asp
<!DOCTYPE html>
<html>
<head>
<title>Strange table margin behaviour</title>
<style type="text/css">
li { border: 1px solid #000099; margin: 0; padding: 0; }
table { border: 1px solid #ccc; display: inline-table; margin: 0; padding: 0; }
</style>
</head>
<body>
<ul>
<li><table><tr><td>test</td></tr></table></li>
<li><table><tr><td>test</td></tr></table></li>
<li><table><tr><td>test</td></tr></table></li>
</ul>
</body>
</html>
关于html - LI 元素内的奇怪 TABLE 边距行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14867595/