減少兩個畫布之間的空間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>