CSS padding 不增加元素宽度的方法

默认情况下，CSS的盒模型会增加 padding 到元素宽度上。使用box-sizing: border-box可以让padding 包含在元素宽度内，不增加元素的宽度。

/* 默认情况，元素最终宽度是340px */
.content-box-example {
	background: #e74c3c;
	width: 300px;
	padding: 20px;
	/* 默认是 content-box */
	box-sizing: content-box;
}

/* 改为border-box，元素最终宽度仍然为300px */
.border-box-example {
	background: #2ecc71;
	width: 300px;
	padding: 20px;
	box-sizing: border-box;
}

1. content-box (默认盒模型)
   • 元素的width只包含内容区域
   • padding和border会增加元素的整体尺寸
2. border-box (推荐盒模型)
   • 元素的width包含内容、padding和border
   • padding不会增加元素的整体宽度
3. 全局设置
   • 使用* { box-sizing: border-box; }可以简化开发
   • 这是现代CSS开发中的常见做法