两个看似各占一半宽度的元素，加上 padding 后却换行，原因通常在盒模型计算。
本文使用HTML5、CSS 与当时浏览器可支持的布局能力，示例为局部页面。页面表现由文档结构、布局规则和浏览器环境共同决定。本文以可核对的 DOM（文档对象模型）和样式计算为起点，不使用后续才普及的布局属性。
1. 从现象推到机制
content-box 的 width 只描述内容区，边框和内边距继续增加外部尺寸。border-box 把边框与内边距包含在指定宽度中，但 margin 仍在外部。布局溢出要计算实际使用尺寸，而不只看声明值。
图中的四个节点分别表示声明宽度、内部尺寸、外部间距、实际排布。顺着实线检查输入如何变成输出，再沿虚线核对反馈条件。图示表达的是本文讨论的关系，不是实测曲线或现场截图。
2. 最小实现与输入条件
用一个固定宽度容器放两个演示卡片，分别切换 box-sizing。通过开发者工具盒模型面板核对内容、内边距和边框。
1
2
3
4
5
6
.card {
box-sizing: border-box;
width: 50%;
padding: 16px;
border: 1px solid #ccc;
}
将片段放进带 UTF-8 声明和 viewport 设置的演示页。使用开发者工具检查实际盒尺寸、计算样式与请求；多浏览器或移动端结论需要在相应环境重新验证。
3. 用对照区分原因
下表列出需要主动改变的条件。预期行为来自机制分析，复现时还需记录运行环境和原始输出，不能将预期当作已经测得的结果。
| 改变的条件 | 需要验证的行为 |
|---|---|
| content-box 加内边距 | 外部宽度会超过声明内容宽 |
| 切换 border-box | 内边距不再额外扩大指定宽度 |
| 两个元素还有外边距 | 仍可能超过容器宽度 |
对照 1：content-box 加内边距
外部宽度会超过声明内容宽。观察时记录盒模型面板的各部分尺寸。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 2：切换 border-box
内边距不再额外扩大指定宽度。观察时记录计算后的总宽度。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 3：两个元素还有外边距
仍可能超过容器宽度。观察时记录margin 是否纳入排布计算。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
4. 适用条件与取舍
统一 border-box 能简化计算，但不能解决所有溢出。长文本最小宽度、图片固有尺寸和布局算法同样会影响结果。
一次正常运行只覆盖了这组输入。继续扩展前，应把上面的异常对照保留下来，尤其关注“两个元素还有外边距”这一分支。后续方案若改变了图中任意一处依赖，原来的判断就要重新验证，不能仅凭界面相似或返回值相同沿用结论。
