CSS 盒模型中 Padding 撑大盒子的解决方法
问题描述
在默认的 W3C 标准盒模型中，元素的 width 属性仅指内容区域的宽度。当给元素添加 padding 或 border 时，这些值会额外增加元素的总宽度，导致布局超出预期。
示例代码
CSS 样式：
div {
margin: 0 auto;
margin-top: 400px;
width: 100px;
height: 100px;
text-align: center;
border: 2px solid black;
}
HTML 结构：
<div>我是内容</div>
现象分析
运行上述代码后，若给内容部分添加 padding: 10px;：
此时盒子实际宽度 = 100px (width) + 20px (左右 padding) + 4px (左右 border) = 124px。
盒子明显被撑大了。
解决方案
将盒模型的计算方式修改为 border-box。
box-sizing: border-box;
应用该属性后，浏览器会自动计算内容的宽高，确保 width 和 height 包含 padding 和 border，从而保持原有的设定尺寸不变。
