审查建议 · 用具体结果判断
审查 AI 建议：border-box 的适用范围
.host { width: 300px; }
.card {
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 20px;
margin-inline: 20px;
}<div class="host">
<div class="card">分享会通知</div>
</div>待审建议：“加上 border-box，卡片就一定不会超出父容器。”
思考：代码支持这个结论吗？指出空间超出的原因，并给出一处针对性的修改。
展开参考分析与修改
结论不成立。本例用 inline-block，通知卡片的边框盒宽度为 300px；左右外边距各为 20px，横向所需空间为 300 + 20 + 20 = 340px。
border-box 包含内边距，不包含外边距。改为 margin-inline: 0 可使卡片装入父容器；内部的 20px 留白仍由 padding 保留。
overflow: hidden 只能隐藏超出的部分，不会让 340px 的空间需求变成 300px。
展开待审代码的运行演示
<style>
.host { width: 300px; background: #fff0dc; }
.card {
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 20px;
margin-inline: 20px;
background: #dcefe9;
}
</style>
<div class="host">
<div class="card">黄梅戏分享会通知</div>
</div>