在CSS盒模型中，padding-top和padding-bottom都用于设置元素内部内容与边框之间的垂直空白区域，但它们作用的方向完全不同。padding-top控制的是元素顶部内边距，也就是内容区域上方到元素上边框内侧的距离；padding-bottom控制的则是元素底部内边距，即内容区域下方到元素下边框内侧的距离。虽然二者都属于padding的细分属性，但在实际排版时，如果混淆使用，很容易让页面出现意料之外的空隙或压缩。
一、基础语法与取值
padding-top和padding-bottom的语法完全一致，都接受长度值（如px、em、rem）、百分比（基于父元素宽度计算）以及auto（多数浏览器对padding不支持auto，实际等同于0）。从书写形式看，它们只是针对不同的边。
下面是一段基础示例，展示如何分别为上下内边距设置不同的值：
.box {
width: 200px;
border: 1px solid #333;
padding-top: 20px;
padding-bottom: 40px;
}
上述代码中，盒子顶部留白20像素，底部留白40像素。若用浏览器审查元素，会看到内容区域被明显向下推了20像素，而底部则多出40像素空间。这种不对称的设置常用于图文混排时，让标题离顶部近一些、离底部说明文字远一些。
二、在普通文档流中的区别表现
在默认静态定位的块级元素中，padding-top会直接把元素自身的内容往下挤，同时也会撑高整个元素的高度（前提是未设固定height）。而padding-bottom则是在内容结束后向下扩张元素高度，不影响内容起始位置。
考虑如下结构：一个父容器内有两段文本，第一段设置padding-top，第二段设置padding-bottom，观察其对后续兄弟元素的影响：
<div class="parent"> <p class="top-pad">我有padding-top</p> <p class="bottom-pad">我有padding-bottom</p> <p class="next">后续内容</p> </div>
.top-pad { padding-top: 30px; background: #f0f0f0; }
.bottom-pad { padding-bottom: 30px; background: #e0e0e0; }
渲染后，top-pad元素因为其顶部内边距，自身背景区向上延伸了30像素，把文字推下；bottom-pad元素的背景向下延伸30像素，将next段落整体向下推。二者虽然都是30像素垂直内边距，但视觉上“推力”发生的位置不同：一个在元素头，一个在元素尾。
三、对滚动容器与固定高度元素的影响
当元素设置了固定高度（height）时，padding-top和padding-bottom都会挤压内容区，但方向差异会导致内容锚定位置变化。例如一个高度100px的容器，设padding-top:20px后，内容只能从距顶20px处开始，剩余80px含底部padding共享；若设padding-bottom:20px，内容从顶部开始，但底部被留出了20px不可用的空白。
在可滚动区域里，这个区别更关键。如果给滚动容器加padding-top，用户滚动到顶时能看到顶部间隙；加padding-bottom，滚动到底时尾部有间隙，防止最后一行贴边。错误使用可能导致“滚动不到底”或“顶部空白过大”的体验问题。
.scroll-area {
height: 150px;
overflow-y: auto;
padding-bottom: 16px; /* 推荐：让末行不贴底 */
}
上面的写法保证内部长内容滚动到底时，仍有16像素呼吸空间。若换成padding-top且容器内容从中间开始，就会浪费顶部可视面积。因此开发滚动列表时，一般底部内边距用得更多。
四、与box-sizing的关系
CSS的box-sizing属性会改变padding的計算方式。当box-sizing: content-box（默认）时，padding不包含在width/height内，设了padding-top或bottom都会让元素实际尺寸变大；当box-sizing: border-box时，设定的宽高已包含padding，此时padding-top和bottom是从固定盒内部分配空间，二者此消彼长。
举例说明border-box下的差异：
.card {
box-sizing: border-box;
height: 100px;
padding-top: 30px;
padding-bottom: 30px;
}
/* 内容区高度 = 100 - 30 - 30 - 边框 = 剩余 */
此时无论调大padding-top还是padding-bottom，都会直接减少内容可用高度，但一个影响内容起点，一个影响内容终点。在精确布局中，需要配合flex等布局模式来补偿，否则文字可能被挤得无法居中。
五、常见误区与选用建议
不少开发者以为上下padding可以随意互换，结果在按钮或卡片设计中，想要“内容靠下”却写了padding-top，导致内容反而靠上。正确做法是：要让内容离顶部远就用padding-top；要让内容离底部远或尾部留白就用padding-bottom。
另外，使用百分比时需注意：padding-top和padding-bottom的百分比都是相对父元素宽度，而非高度。这意味着在宽屏上，上下内边距会同步变宽，可能造成移动端底部间隙过大。此时可改用clamp()或媒体查询分别约束。
.responsive {
padding-top: clamp(10px, 2vw, 24px);
padding-bottom: clamp(10px, 4vw, 40px);
}
通过分别限制上下内边距的伸缩范围，既能保持比例，又避免误用导致的垂直节奏混乱。总的来说，padding-top与padding-bottom的核心区别就在作用边与视觉推力方向，理清这一点，垂直间距控制就变得非常直观。
CSSpadding-toppadding-bottom修改时间：2026-08-03 23:39:29