Question

我试图将一个canvas元素放入一个没有填充的表格单元格中，即我的画布和单元格的顶部/底部之间没有边距。因此，我将行高定义为20px，将画布高度定义为20px。我也使用填充：0px样式。但是，我从顶部和左边都没有填充，我仍然在底部填充填充。事实上，看起来表格单元格更高，以适应不希望的边缘。我该如何解决？

另外，在HTML和CSS中定义画布宽度和高度有什么区别？有人会覆盖另一个吗？

以下是我的HTML代码。感谢。

<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>

<script>
  $(function() {
      var canvas = document.getElementById('my_canvas');
      var ctx = canvas.getContext('2d');    
      ctx.fillRect(0,0,20,20);  
      $("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
  })

</script>
</head>

<style media="screen" type="text/css">

    .my_cell {height:20px; width:100px; padding:0}
    .my_canvas {height:20px; width:20px}
</style>

<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
    <tr><td class="my_cell"></td></tr>
</tbody>
</table>

<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>

</body>
</html>

Answer 1

尝试将以下内容添加到画布的样式中：

display : block;

演示：http://jsfiddle.net/S7YJu/

你可以看看为什么看这个：http://jsfiddle.net/S7YJu/1/ - 默认情况下画布显示inline，这意味着它排列的方式为“y”之类的字母底部留出空间或“p”挂在......

Answer 2

尽管您的问题已经回答，但我想指出以下几点。

Canvas元素的处理方式与内联元素非常相似，尽管它似乎是block level elements，类似于an image element is treated。要解决您的问题，您必须为样式设置样式规则display为block。

出于最好的意图，我想给你一些建议：

1您省略了打开的正文标记。

2建议将脚本标签放在底部。

4尽可能使用div而不是table元素。

5你并不总是使用Jquery选择器......

即

document.getElementById('my_canvas');

复制 - ＆gt;

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
  .my_cell {width:100px; }
  .my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
  <table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
     <tbody>
        <tr>
           <td class="my_cell"></td>
        </tr>
     </tbody>
  </table>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  <script>
     $(document).ready(function () {
        $(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
            });

       var canvas = $('.my_canvas');
       var ctx = canvas.getContext('2d');    
       ctx.fillRect(0,0,0,20,20);
  </script>
</body>
</html>

将元素拟合到表格单元格中

2 个答案: