如何使边框适配Canvas尺寸而非父级div宽度？

这个问题的核心原因是：默认情况下<div>是块级元素，它的宽度会自动填充父容器的可用宽度，所以你的#game div即使内部只有固定尺寸的Canvas，也会撑满.body-content的80%宽度，导致边框跟着拉宽。

下面是两种简单有效的解决方式：

方法1：使用inline-block改变元素显示类型 #

把#game改成行内块元素，这样它的宽度会由内部内容（也就是你的Canvas）决定，同时调整父容器让它保持居中：

/* 给#game设置边框并改为行内块 */
.body-content #game {
  border: solid;
  display: inline-block;
}

/* 让#game在.body-content里水平居中 */
.body-content {
  margin: auto;
  width: 80%;
  text-align: center;
}

方法2：使用width: fit-content（现代浏览器推荐） #

这个CSS3属性可以直接让元素宽度刚好容纳内部内容，不需要修改显示类型，同时保持居中：

.body-content #game {
  border: solid;
  width: fit-content;
  margin: auto; /* 自动水平居中 */
}

/* 原.body-content样式保持不变 */
.body-content {
  margin: auto;
  width: 80%;
}

补充说明 #

• 方法1的兼容性更好，能支持几乎所有浏览器（包括旧版IE）；
• 方法2更简洁，但仅支持现代浏览器（Chrome、Firefox、Safari、Edge等）；
• 两种方法都能让#game的边框完美贴合p5.js生成的Canvas尺寸，不会再继承父容器的宽度。

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