css内边框是css盒模型中一种特殊的边框绘制方式，和默认的边框会向外扩展元素尺寸不同，内边框会占用元素原本的内容区域空间，不会改变元素设定的总宽高。要理解内边框，首先需要明确css盒模型的基本构成，再结合相关属性分析其实现逻辑。
css盒模型的基本构成
css中每个元素都可以看作一个矩形盒子，标准盒模型由四部分组成，从内到外依次是：
- content：内容区域，用来显示文本、图片等实际内容，大小由width和height属性设定
- padding：内边距，内容区域和边框之间的空白区域
- border：边框，包裹内边距和内容的边界线
- margin：外边距，盒子和其他元素之间的空白区域
默认情况下，也就是box-sizing属性取值为content-box时，设定的width和height仅对应content区域的大小，边框和padding会额外增加到元素总尺寸上。比如设定一个元素width为200px，border为2px，那么这个元素的总宽度实际是200+2*2=204px。
内边框的实现原理
内边框的实现核心是修改box-sizing属性的取值为border-box，此时元素的width和height会包含content、padding和border的总大小，边框会向内挤压content区域的空间，不会让元素整体尺寸超出设定值。这种模式下，边框就相当于绘制在元素内部，也就是我们所说的内边框。
两种box-sizing取值的对比
我们可以通过下面的表格直观看到两种模式的差异：
| box-sizing取值 | width/height包含范围 | 边框是否外扩 | 元素总尺寸计算方式 |
|---|---|---|---|
| content-box（默认） | 仅content | 是 | width + padding左右 + border左右 |
| border-box | content+padding+border | 否 | 等于设定的width/height |
内边框代码示例
下面通过两段代码对比默认模式和内边框模式的效果：
默认外扩边框示例
/* 默认content-box模式，边框外扩 */
.outer-box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
box-sizing: content-box; /* 默认值，可省略 */
background-color: #f0f0f0;
}
上述代码中，元素总宽度是200 + 10*2 + 2*2 = 224px，总高度是100 + 10*2 + 2*2 = 124px，边框在content外部，属于外扩边框。
内边框示例
/* border-box模式，内边框 */
.inner-box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
box-sizing: border-box;
background-color: #e8f4ff;
}
上述代码中，元素总宽度和总高度仍然是200px和100px，border和padding会向内挤压content区域，content的实际可用宽度变成200 - 10*2 - 2*2 = 176px，可用高度变成100 - 10*2 - 2*2 = 76px，边框绘制在元素内部，就是典型的内边框效果。
内边框的实际应用场景
内边框在布局中有很多实用场景：
- 固定尺寸布局时，避免边框和padding导致元素尺寸超出容器，不需要反复计算调整width和height
- 响应式布局中，配合百分比宽度使用时，边框不会破坏整体布局的比例
- 表单元素、卡片组件等需要固定外轮廓的场景，保证组件整体尺寸符合设计预期
需要注意的是，内边框只是边框绘制位置的变化，边框的样式、颜色、宽度设置方式和默认模式完全一致，只是计算规则不同。只要掌握了box-sizing属性的用法，就能轻松理解和应用css内边框。
css内边框box-sizingborder-boxcontent-box修改时间：2026-06-08 22:00:29