Html 表中内联元素与块元素的长方体模型
我使用一个表格来显示表格数据，但我需要获得完美的大小像素，以便内容不会占用比我可用的更多的垂直空间。另外，单独使用css布局是不可行的，因为我有几十个元素 以下是我的简单测试代码：Html 表中内联元素与块元素的长方体模型,html,css,html-table,Html,Css,Html Table,我使用一个表格来显示表格数据，但我需要获得完美的大小像素，以便内容不会占用比我可用的更多的垂直空间。另外，单独使用css布局是不可行的，因为我有几十个元素 以下是我的简单测试代码： <!DOCTYPE html> <html lang="en"> <head> <style> table, td, tr, thead, tfoot, tbody, th, tf { border-collapse: collapse; margin:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border:0;
line-height:16px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr style="height:16px">
<td>
<span style="font-size:10pt;">Here is some text</span>
</td>
</tr>
</table>
</body>
</html>
表，td，tr，THAD，tfoot，tbody，th，tf{
边界塌陷：塌陷；
边际：0px；
填充：0px；
边界：0；
线高：16px；
}
这里有一些文字
编辑：我意识到我并没有真正回答这个问题。我在Firebug中做了一些探索（我在Mac上，所以目前无法访问IE），看起来不是跨度本身推动了单元格的高度，而是td的线高度最终控制了td的高度。跨度的高度只有14px。我怀疑是空文本节点（显示在IE的开发工具中）推动了高度。一种方法是将字体大小规范向上移动一两个节点，以便它也应用于空文本节点。至少在FB，这似乎解决了问题，并证明跨度不是问题所在。（如果改用div，可能空文本节点不存在？你甚至需要一个span或div，或者你可以将文本放在td中？有趣的是，如果我在IE开发者工具中查看该空文本节点，它不会显示它占用任何空间，并且当我将span更改为div时，它不会显示那个鬼祟的小空文本节点。如果我根本不使用span或div并将文本直接放在td中，它也可以工作。将字体大小提高到一个更高的级别似乎会使单元格大小正确地调整到16像素而不是17像素，但我不明白为什么会这样。我想知道表格单元格中是否有内联元素导致了这种行为（比如创建空文本节点）。如果不将跨度放在自己的行上，空文本节点会消失吗。。。奇怪的是，当我去掉td和span标签之间的空白/换行符时，它确实消失了。我想在表格单元格中添加换行是不好的？我想让我的标记更容易阅读，这就是为什么我采用这种方式。仍然令人困惑的是，为什么它会给单元格更多的空间来容纳跨距而不是换行的div，我猜表格单元格假设在使用块级元素时，它会占据整个单元格？关于行高度的更新：如果我不使用行高度，我就无法使它与跨距一起正确调整大小，使用td中的行高和跨距周围的额外空白，它会创建空文本节点（这显然会受到行高的影响）。我想这个故事的寓意是，如果你想保持理智，就不要在表格单元格中使用空格和空格。