如何将HTML Canvas元素对齐到屏幕边缘？默认边距问题求解

方案1：绝对定位Canvas（推荐，不影响其他元素） #

Canvas默认是inline-block元素，加上body默认的8px margin，会导致它周围出现空白。用绝对定位可让Canvas脱离文档流，直接贴合屏幕边缘，且不干扰其他元素布局：

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  /* 让Canvas占满整个视口 */
  width: 100vw;
  height: 100vh;
  /* 消除inline-block带来的垂直基线间距 */
  display: block;
}

如果担心Canvas覆盖其他元素，可添加z-index: -1;将它设为背景层，其他元素会自动显示在上方。

方案2：仅重置Canvas容器的边距 #

用容器包裹Canvas，抵消body的默认margin，同时让容器占满屏幕，不影响其他元素：

/* Canvas的包裹容器 */
.canvas-wrap {
  position: relative;
  /* 抵消body默认的8px margin */
  margin: -8px;
  width: calc(100vw + 16px);
  height: calc(100vh + 16px);
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

方案3：重置body margin但恢复其他元素默认间距 #

若愿意修改body的margin，可手动给按钮、文本等元素加回默认间距：

body {
  margin: 0;
}

/* 给非Canvas元素恢复默认边距 */
p, button, h1, h2, h3, ul, ol {
  margin: 1em 8px; /* 模拟浏览器默认的间距效果 */
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

内容的提问来源于stack exchange，提问作者theknightD2