删除画布元素下的空间？答案

【问题标题】：Remove Space Under Canvas Element?删除画布元素下的空间？
【发布时间】：2017-06-07 03:54:02
【问题描述】：

我写了以下代码

 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 的初学者，如果我没有正确地提出我的问题，请在下面的评论中提及，我很乐意这样做。

【问题讨论】：

标签： html css canvas spacing border-spacing

【解决方案1】：

canvas {
  display: block;
}

这应该可以解决问题。

好的解释：

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

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

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

【讨论】：

@Stranger - 因为画布元素是替换元素并且默认情况下是内联元素，所以元素的底部是它的基线。同样在同一行上的是一个支柱 - 一个零宽度的伪字符，与同一基线对齐，但其中一部分悬挂在该基线下方。下方线的顶部必须低于该线的底部，包括悬挂在基线下方的支柱位。通过使画布成为块元素，没有线条也没有支柱，因此不需要为它留出额外的空间。
如果你把解释放在答案本身而不是添加到cmets中会更好。
@Alohci 你有关于这个规格的链接吗？基本上你说的那个零宽度的伪字符？

【解决方案2】：

此空格由</canvas> 和<canvas> 之间的换行创建。

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

body{font-size:0}

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

<canvas></canvas><canvas></canvas><canvas></canvas>

【讨论】：

我试过了，不行，你自己试试吧。