为何div内的canvas存在垂直偏移？无内外边距仍出现该问题

问题原因 #

元素默认属于行内块级元素（inline-block），浏览器会将其与文本的基线（baseline）对齐。即便父容器内没有文本，浏览器也会为基线下方的下沉字符（比如字母g、y）预留空间，这就导致canvas出现了看似无原因的垂直偏移。

解决方案 #

以下三种方法都能解决这个问题：

方法1：修改canvas的垂直对齐方式

给.inner类添加vertical-align属性，将对齐方式改为顶部、中部或底部：

.outer {
  height: 100px;
  width: 200px;
  border: 1px solid;
}
.inner {
  background: coral;
  width: 40px;
  height: 10px;
  vertical-align: top; /* 可选值：middle / bottom */
}

方法2：将canvas设置为块级元素

把canvas的display改为block，脱离行内流，就不会受到基线对齐规则的影响：

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

方法3：消除父元素的基线预留空间

给父容器.outer设置line-height: 0;，去掉基线下方的预留空间：

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

内容的提问来源于stack exchange，提问作者Friedrich -- Слава Україні