如何让堆叠的HTML Canvas适配容器Div并保留左下外边距？

我在应用中使用多个堆叠的HTML <canvas> 元素进行绘图，希望这些画布既能适配容器div的宽度和高度，同时保留左外边距与底部外边距。以下是我的伪HTML代码和CSS代码，期望实现的效果为：容器是黑色边框的500x500方块，内部蓝色边框的画布整体向右上偏移，左侧保留10px空白、底部保留10px空白，画布填满剩余容器空间且多个canvas堆叠在一起，恳请提供解决思路。

伪HTML代码 #

<body>
  <div>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
  </div>
</body>

原有CSS代码 #

div {
  position: relative;
  width: 500px;
  height: 500px;
  border: 2px solid black;
}

canvas {
  position: absolute;
  top: 0;
  right: 0;
  border: 2px solid blue;
  margin-left: 10px;
  margin-bottom: 10px;
}

解决思路 #

• 问题根源：绝对定位元素的margin-left和margin-bottom在仅设置top:0; right:0时无法生效，因为绝对定位的位置由top/right/bottom/left属性主导，margin无法直接调整元素的占位空间。
• 调整定位属性：给canvas同时设置top:0; left:10px; bottom:10px; right:0;，通过left和bottom直接定义画布与容器左、下边缘的间距，top和right贴紧容器上、右边缘，这样画布会自动拉伸填充剩余空间。
• 修正盒模型：添加box-sizing: border-box;，确保canvas的border宽度包含在自身宽高内，避免边框撑大画布导致超出容器范围。
• 移除无效margin：删掉原有CSS中的margin-left和margin-bottom，因为已经通过定位属性实现了边距需求。

修改后的CSS代码 #

div {
  position: relative;
  width: 500px;
  height: 500px;
  border: 2px solid black;
}

canvas {
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 10px;
  right: 0;
  border: 2px solid blue;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Adam B.