写240px却占288px，怎样用盒模型核对内边距和边框

操作步骤

1. 打开/tool/css-box-sizing，保留指定宽度240、每侧内边距20、每侧边框4。
2. 比较content-box与border-box两块图形及数字结果，移动端在图形区横向查看。
3. 复制CSS，确认box-sizing为border-box，再核对width、padding和border。
4. 把指定宽度改为40、每侧内边距30、边框4，观察内容宽降为0的特殊情况；输入39应隐藏结果和导出。

跟着示例试一次

默认240/20/4：两侧额外尺寸为2×(20+4)=48px。content-box内容宽240px，外宽288px；border-box外宽240px，内容宽192px。把参数设为40/30/4时，border-box内容宽0，实际外宽68px。

怎样确认结果正确

图形由浏览器原生CSS渲染，不是按计算结果缩放的图片。默认两块边框外宽应分别288px和240px；下载代码中的width仍为240px。窄屏只滚动图形区域，不改变图形的指定尺寸。

常见问题与边界

本工具仅普通块盒水平尺寸，不计margin、滚动条、Flex收缩、Grid约束或min/max-width。border-box内容宽不能为负；过大的padding和border仍能撑宽盒子。下载只含border-box规则，无高度。参数不上传、不自动保存。