CSS盒模型是页面元素布局的核心规则，所有HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区、内边距、边框、外边距四部分组成。理解盒模型的工作机制，是精确控制元素尺寸和间距的基础，尤其是处理图片这类替换元素时，盒模型的规则会直接影响最终的视觉效果。
CSS盒模型的两种类型
CSS中盒模型分为两种，默认情况下元素使用的是标准盒模型，也可以通过box-sizing属性切换为怪异盒模型。
标准盒模型
标准盒模型下，元素设置的width和height仅对应内容区的尺寸，元素的总宽度和总高度需要加上内边距、边框和外边距的数值。
总宽度计算公式为：内容宽度 + 左右内边距 + 左右边框宽度 + 左右外边距
总高度计算公式为：内容高度 + 上下内边距 + 上下边框宽度 + 上下外边距
怪异盒模型
当设置box-sizing: border-box时，元素会切换为怪异盒模型，此时设置的width和height会包含内容区、内边距和边框的尺寸，元素的总尺寸只需要再加上外边距即可。
总宽度计算公式为：设置的宽度 + 左右外边距
总高度计算公式为：设置的高度 + 上下外边距
控制图片边框的border属性
border属性用于设置元素的边框样式，对于图片元素来说，边框可以围绕在图片内容的外侧，常见的作用是为图片添加装饰性边框或者分隔效果。
border是复合属性，可以同时设置边框的宽度、样式和颜色，也可以单独拆分设置：
border-width：设置边框的宽度，支持数值或者thin、medium、thick等关键字border-style：设置边框的样式，常见值有solid实线、dashed虚线、dotted点线等border-color：设置边框的颜色，支持颜色名、十六进制值、rgb值等
以下是一个给图片添加红色实线边框的示例代码：
/* 给类名为img-demo的图片添加边框 */
.img-demo {
/* 切换为怪异盒模型，避免边框增加图片总宽度 */
box-sizing: border-box;
/* 复合写法设置边框：2px宽、实线、红色 */
border: 2px solid #ff0000;
/* 单独设置边框圆角 */
border-radius: 8px;
}
控制图片内边距的padding属性
padding属性用于设置内容区和边框之间的空白区域，对于图片元素来说，内边距会在图片内容和边框之间产生留白，让图片和边框不会紧贴在一起。
padding同样可以复合设置，也可以单独设置四个方向的值：
padding-top：上内边距padding-right：右内边距padding-bottom：下内边距padding-left：左内边距
复合设置padding时，按照上、右、下、左的顺序赋值，如果只设置1-3个值，会按照对应规则自动补全其他方向的值。
以下是给图片设置内边距的示例代码：
.img-demo {
box-sizing: border-box;
border: 2px solid #ff0000;
/* 上下内边距10px，左右内边距20px */
padding: 10px 20px;
}
控制图片外边距的margin属性
margin属性用于设置元素边框外侧的空白区域，用于控制当前图片和其他相邻元素之间的间距，不会影响元素自身的尺寸。
margin的设置规则和padding类似，也可以单独设置四个方向的值，或者使用复合属性按上、右、下、左的顺序赋值。
需要注意的是，垂直方向的外边距会出现外边距折叠的情况，即相邻两个垂直元素的外边距会取较大的那个值，而不是两个值相加。
以下是给图片设置外边距的示例代码：
.img-demo {
box-sizing: border-box;
border: 2px solid #ff0000;
padding: 10px 20px;
/* 上下外边距15px，左右外边距auto实现水平居中 */
margin: 15px auto;
}
实际场景中的精确控制示例
假设我们需要实现一个图片卡片，图片有圆角边框，图片和边框之间有10px的留白，卡片和其他元素之间有20px的间距，宽度为300px，这时候可以结合盒模型属性实现：
<div class="img-card">
<img src="https://ipipp.com/demo.jpg" alt="示例图片" class="card-img">
</div>
对应的CSS代码如下：
/* 卡片容器使用怪异盒模型 */
.img-card {
box-sizing: border-box;
/* 卡片总宽度300px，包含边框和内边距 */
width: 300px;
/* 卡片边框 */
border: 1px solid #e5e5e5;
/* 卡片内边距，让图片和卡片边框有间距 */
padding: 10px;
/* 卡片圆角 */
border-radius: 12px;
/* 卡片和其他元素的间距 */
margin: 20px;
}
/* 图片样式，占满容器内容区 */
.card-img {
/* 图片宽度占满容器内容区，避免溢出 */
width: 100%;
/* 图片高度自适应 */
height: auto;
/* 图片圆角，比卡片圆角小一点 */
border-radius: 8px;
/* 去除图片底部的默认间隙 */
display: block;
}
通过这种方式，我们可以精确控制图片相关的所有尺寸和间距，避免因为盒模型计算错误导致布局不符合预期的问题。
CSS_box_modelmarginpaddingborder修改时间：2026-06-30 17:09:38