减少两个画布之间的空间html

Question

我想将两个画布放在附近。但不幸的是，当我包含两个画布时，会自动在两个画布之间产生一个空间如何删除该空白空间或如何加入该两个画布。这里是我的小提琴Fiddle

这里是我的代码：

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
​ 

这里的脚本：

window.onload=function() 
{ 
var canvas = document.getElementById("button"); 
var ctx = canvas.getContext('2d'); 
}​ 

Answer 1

在HTML换行符被视为一个空间。只要摆脱了两个画布之间的空白：

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"> 
</canvas><canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"> 
</canvas> 

见fiddle.

或使用：

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas><!-- 
--><canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas>