表格单元格下的空间

我有一个问题，表格单元格中的高度为100%的图像或画布会使此单元格增长。表格单元格下的空间

这里的整个页面：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <table><tr><td id=t style="width:50px;height:50px;background:green;"> 
     <canvas id=c style="width:100%;height:100%;margin:0;padding:0"></canvas> 
    </td></tr></table> 
    <script> 
    console.log($('#t').height()); 
    </script> 
</body> 
</html>

我希望看到在控制台50，但它记录55。

This can be tested here。

这页是的确切内容a fiddle I had made on jsbin.com，小提琴录音预计50。

有人可以解释我究竟有什么区别，更重要的是，如何确保我的细胞不会像它那样生长，因此它的高度与其内容一样是50px，就像jsbin中的情况一样？

来源

2013-04-16 Denys Séguret

“边距”只是从表中继承的边界间距，递归应用。现在，为什么这在jsbin中是不同的，你的例子超越了我。虽然“5px”也是一个神秘的价值... –

你是一个可怕的人。 – Shmiddty

我接受第一个答案，因为它解决了这个问题，但任何解释（这是一个真正的解释5px的解释）都会受到尽可能多的upvotes的欢迎。 –

添加在您的帆布风格

<canvas style="display:block"></canvas>

这不仅是因为帆布有一个默认的尺寸大于预期。

来源

2013-04-16 10:02:11

它似乎工作。所以这里已经是+1了。但是，你能更好地解释为什么它可以工作，为什么它在jsbin.com上没有它？ –

请注意，它也适用于'td'元素上的这种显示风格。哪个还没说清楚呢...... –

为什么5px？在我的一些测试中，用我的特定CSS，它是4px ...这个“边距”从哪里来的？ –

表格单元格下的空间

回答

相关问题