表格單元格下的空間

我有一個問題，表格單元格中的高度爲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 ...這個「邊距」從哪裏來的？ –

表格單元格下的空間

回答

相關問題