为什么div里面的canvas有垂直偏移？

Question

为什么

canvas

内部

div

有垂直偏移？ Web 检查器不会显示

div

和

canvas

的任何边距或填充。

.outer {
  height: 100px;
  width: 200px;
  border: 1px solid;
}
.inner {
  background: coral;
  width: 40px;
  height: 10px;
}

<div class="outer">
<canvas class="inner"></canvas>
</div>

Answer 1

我发现设置

line-height: 0;

或

display: block;

会删除偏移。

如果内部元素也是

div

，则不会有偏移，因为

display: block;

是

div

的默认值 (https://www.w3schools.com/cssref/css_default_values.php)。

canvas

的默认值似乎是

display:inline

。

当画布高度大于行高时，偏移也会消失。