如何去除PIXI.js应用添加到DOM后的底部边距？

底部出现边距通常是浏览器默认样式或canvas元素的布局特性导致的，以下是几种可行的解决方法：

1. 重置HTML和Body的默认样式 #

浏览器默认会给html和body设置margin或padding，直接重置即可消除基础边距：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 可选，防止页面出现滚动条 */
}

2. 修改Canvas元素的显示属性 #

PIXI生成的canvas默认是inline-block类型，这种布局会导致元素与文本基线对齐，从而产生底部空隙。将其改为block即可解决：

canvas {
  display: block;
}

3. 配置PIXI应用的自适应选项 #

如果需要应用自适应窗口大小，可以在创建PIXI应用时开启resizeTo选项，确保canvas铺满整个窗口：

const app = new PIXI.Application({
  resizeTo: window, // 让应用自适应窗口大小
  backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

4. 强制设置Canvas的尺寸和位置 #

如果以上方法不生效，可以直接给canvas设置固定尺寸并清除默认边距：

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb
});
const canvas = app.view;
canvas.style.margin = '0';
canvas.style.padding = '0';
canvas.style.display = 'block';
document.body.appendChild(canvas);

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