在CSS盒模型中，一个元素的最终渲染区域由内容区、内边距、边框和外边距四层结构组成。padding用于增加内容到边框之间的内部空白，margin用于控制元素边界与相邻元素或容器边缘之间的外部距离。虽然两者都表现为留白，但padding属于元素自身的可点击区域和背景覆盖范围，margin则完全透明且不占用自身背景，这种差异在布局和交互中会产生不同影响。
下面进入具体的取值规则、简写方式和实战注意事项。先理解盒模型对于宽度计算的影响，才能正确判断何时应该用padding，何时应该用margin。
一、盒模型结构决定宽度计算方式
默认情况下，CSS的box-sizing属性值为content-box。在这种模式下，给元素设置的width和height只作用于内容区，padding和border会额外增加到元素总尺寸上。例如一个div设置了宽度300px、左右padding各20px、左右border各1px，实际占据的水平宽度就是342px。如果外部容器只有300px，元素就会溢出。很多布局错乱正是因为没有把padding和border计算在内。
可以通过将box-sizing设置为border-box来改变这种计算方式。在border-box模式下，width和height包含了内容区、padding和border，内容区会自动收缩。示例代码：
/* 默认盒子模型 */
.box-content {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
}
/* 切换为border-box */
.box-border {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
}
两种模式下元素的可视宽度都为300px，但内容区宽度不同。border-box更符合直觉，所以在实际项目中常通过通配符选择器统一设置，以便后续只关心整体宽度。
二、padding内边距：撑开内容与边框的距离
padding的取值可以是长度单位、百分比或者inherit关键字。长度单位最常见的是px、em、rem。百分比并不是相对于父元素高度，而是相对于包含块的宽度，也就是说上下padding使用百分比时，同样以包含块宽度为基准计算，而不是高度。这一点容易误判，例如在父容器宽度为400px的情况下，padding-top:10%会得到40px，而不是父元素高度的10%。
padding支持一至四个值的简写形式，遵循上、右、下、左的顺时针顺序。写一个值时四个方向相同；两个值时第一个对应上下，第二个对应左右；三个值时分别对应上、左右、下；四个值时明确对应上右下左。例如：
.card {
padding: 20px; /* 上下左右均为20px */
}
.article {
padding: 16px 24px; /* 上下16px，左右24px */
}
.notice {
padding: 8px 12px 16px; /* 上8px，左右12px，下16px */
}
.widget {
padding: 10px 15px 20px 25px; /* 上右下左分别设置 */
}
还需要注意行内元素的padding特性。对于span、a等行内非替换元素，左右padding可以正常推开文字，但上下padding虽然会覆盖背景，却不会改变行框高度，也不会把相邻行推开。如果确实需要上下间距，应改用display:inline-block或display:block，否则会看到背景上下重叠到其他行但文字位置不变。
三、margin外边距：控制元素之间的距离
margin用于推动元素与周围元素之间的距离，取值可以是长度、百分比、auto或负值。百分比和padding一样相对包含块宽度计算。margin的简写顺序与padding完全一致。使用margin:0 auto可以让具有确定宽度的块级元素在父容器内水平居中，这是非常经典的居中方式。
margin为负值时会让元素向相反方向移动或重叠。如左右为负值可以拉宽子元素，常用于突破父容器padding限制；上下为负值可以消除首尾元素的多余间距。但要谨慎使用，因为负外边距可能引起意外的布局穿透和响应式问题。
相邻块级元素之间的上下margin会发生折叠，也叫外边距合并。两个垂直相邻元素的margin-top和margin-bottom会合并成一个，取较大值，而不是简单相加。例如上方元素margin-bottom:30px，下方元素margin-top:20px，实际距离为30px。这种规则在父元素没有边框、padding或overflow不为visible时也会出现父子外边距折叠，导致父元素被带动。解决方式包括给父元素设置overflow:hidden、padding:1px、border或改用flex/grid布局。
/* 外边距折叠演示 */
.top {
margin-bottom: 30px;
height: 80px;
background: #eee;
}
.bottom {
margin-top: 20px;
height: 80px;
background: #f5c6c6;
}
/* 最终两个块之间距离为30px，而不是50px */
行内元素在垂直方向的margin不会影响行框高度，而水平方向margin可以控制与相邻文字的间距。对于行内非替换元素，垂直margin基本无效。需要垂直间距时同样建议使用inline-block或块级化处理。
四、实战中的间距控制与全局重置
不同浏览器对常见元素会有默认margin和padding，例如body自带8px外边距，h1到h6有不同的上下边距，ul有左内边距等。如果不重置这些样式，页面边缘和列表位置会因浏览器差异而不一致。项目初期通常会做样式重置：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
上述规则会移除所有元素的默认间距并统一盒模型，但通配符重置的性能影响在现代浏览器中已经很小，且能显著减少后续调试成本。如果项目中对某些元素需要保留默认样式，可以改为有选择的重置，例如：
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd {
margin: 0;
padding: 0;
}
在实际布局中，建议遵循一个原则：影响元素自身背景、边框内部留白、点击区域时使用padding；影响元素与兄弟元素或容器边缘的距离时使用margin。例如按钮内部的文字到边框的距离应该用padding控制，这样背景色和悬停点击区域都能覆盖间隔；而按钮与按钮之间的间距应该用margin或父容器的gap控制，避免第一个或最后一个元素产生不必要的偏移。
还需要注意间距系统的统一。可以定义CSS变量来管理不同层级的间距，例如：
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
}
.card {
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-md);
}
这样整个页面的间距有规律可循，也方便响应式调整。借助flex或grid布局时，可以使用gap属性替代部分margin，以减少外边距折叠和首尾元素间距的额外处理。理解padding与margin在盒模型中的角色后，再结合box-sizing和重置规则，能够构建出更可控的CSS布局。