Question

我写了以下代码

 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>

我想删除画布元素之间的间距，并希望它之间没有空格，它们如何实现呢？

当我明确将保证金设为零时，为什么还有间距？

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

Answer 1

canvas {
  display: block;
}

这应该可以解决问题。

好的解释：

看画布是内联的，所以让我们把它看作文字或简单的字符..现在考虑字符'w'和'g'..现在注意'g'在线下降比'w'低，所以当字符'g'呈现在基线下面有一些空格，所以当渲染'wg'时，字符'w'下面有空格。

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

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

Answer 2

在呈现HTML时，canvas元素的新行被视为空格。您可以将它们转换为显示为块或设置负边距，如果您仍然需要它们内联。

canvas { display: block;}

或

canvas { margin: -2px; }

Answer 3

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

尝试为canvas元素的父元素

添加font-size:0

body{font-size:0}

或删除结束标记和canvas元素的开始标记之间的换行符。

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

删除画布元素下的空间？

3 个答案: