css元素大小如何通过padding和border控制
元素的最终大小在CSS中不仅由width和height决定，还受到padding和border的影响。理解它们如何共同作用，能更精准地控制布局。
box-sizing属性决定尺寸计算方式
默认情况下，大多数元素的box-sizing是
.element {
width: 200px;
padding: 20px;
border: 5px solid black;
}
实际宽度为：200 + 20×2 + 5×2 = 250px
将后，width包含内容、padding和border：
.element { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid black; }此时内容区会自动压缩为150px（200 - 40 - 10），总宽仍是200px。
padding如何影响内部空间
padding定义内容与边框之间的空白区域，它直接扩大元素视觉体积：
- 上下padding增加元素高度
- 左右padding增加元素宽度（在content-box下）
- 即使背景色延伸到padding区域，也会影响点击热区和布局占位
注意：内联元素的上下padding虽然不参与行高叠加，但仍可设置并显示。
border对尺寸的贡献
border默认占据空间，其宽度计入元素总尺寸：
- 实线边框（solid）、双线边框（double）等都有明确宽度
- 隐藏边框如不占空间
- 当使用，让尺寸更直观
- 需要固定容器大小时，优先使用的作用机制，就能灵活运用padding和border来控制元素的实际占地大小。不复杂但容易忽略细节。
