5

我写了以下代码 

 canvas{ width: 1000pt;height: 100pt; margin: 0px;   }
.bluecolor{background-color : skyblue;}
.orangecolor{  background-color : darkblue;}
.indianred{background-color : 	#CD5C5C ;}
 
<html>
<body>
<canvas id="canvas1" class = "orangecolor" > </canvas>
<canvas id="canvas2" class = "bluecolor" > </canvas>
<canvas id="canvas3" class = "indianred" ></canvas>
</body>
</html>

我想去掉canvas元素之间的间距，又想让它之间没有空格，他们怎么实现呢？

当我明确地将边距设为零时，为什么还有间距？

也许我错过了一个关键点，我是 HTML、CSS 和 JavaScript 的初学者，如果我没有正确地提出我的问题，请在下面的评论中提及，我会很乐意这样做。

4

2 回答 2

6 
canvas {
  display: block;
}

这应该可以解决问题。

好的解释：

看到画布是内联的，所以让我们将它视为文本或为简单起见一个字符.. 现在考虑字符 'w' 和 'g' .. 现在请注意 'g' 在行中下降低于 'w' ，所以当字符 'g ' 被渲染，基线下方有一些空间，所以当 'wg' 被渲染时，字符 'w' 下方有空白空间。

那就是您在行内元素画布下方看到的空间。

让我们摆脱内联的东西并给它一个display: block

于 2017-01-22T15:34:22.533 回答
0

</canvas>这个空间是由和之间的换行创建的<canvas>。

尝试为font-size:0画布元素的父元素添加，

body{font-size:0}

或像这样删除画布元素的结束标记和开始标记之间的换行符。

<canvas></canvas><canvas></canvas><canvas></canvas>
于 2017-01-23T04:08:51.367 回答