padding-top和padding-bottom是CSS中控制元素上下内边距的两个核心属性。它们决定了元素内容区域与边框之间的垂直留白，在按钮、卡片、导航栏、表单控件等场景中被大量使用。理解和掌握这两个属性的计算规则，是写出精确布局的基础。本文将从盒模型原理入手，逐步讲解取值方式、百分比特性以及实战技巧。
一、盒模型中的padding-top与padding-bottom
在标准盒模型中，一个元素由外到内依次是margin、border、padding和content四层。padding-top控制的是内容区顶部到上边框内侧的距离，padding-bottom则控制内容区底部到下边框内侧的距离。需要注意，padding影响的是元素自身内部的空白，而margin影响的是元素与外部其他元素之间的距离，两者作用对象完全不同。
默认情况下（box-sizing取content-box），元素实际占用的高度等于content高度加padding-top、padding-bottom再加上下边框宽度。这一点在计算布局时非常关键。例如一个div设置了height为100px、padding-top为20px、padding-bottom为20px，那么它在页面上实际占据140px的高度，除非显式设置box-sizing为border-box。
.box {
height: 100px; /* 内容区高度 */
padding-top: 20px; /* 上内边距 */
padding-bottom: 20px; /* 下内边距 */
border: 1px solid #ccc;
/* 实际总高度 = 100 + 20 + 20 + 2 = 142px */
}
.box2 {
box-sizing: border-box; /* 切换为边框盒模型 */
height: 100px;
padding-top: 20px;
padding-bottom: 20px;
/* 总高度固定为100px，内容区被压缩到60px */
}实际项目中推荐在全局样式中统一声明box-sizing:border-box，这样可以避免加内边距后元素尺寸膨胀的问题，也让padding-top和padding-bottom的计算更符合直觉。
二、取值单位与百分比的特殊规则
padding-top和padding-bottom支持多种取值单位，最常见的是px固定值，适用于间距要求精确的场景，比如按钮内边距统一为上下10px。em和rem则适合需要跟随字号缩放的场景，例如padding-top:0.5em会让间距随文字大小自动变化，在响应式排版中很实用。
最容易被忽视的是百分比取值。无论padding-top还是padding-bottom，设置百分比时参照的都是父元素的宽度而不是高度。这是CSS规范的规定，目的是保证垂直间距能基于宽度做比例计算，从而实现等比例的响应式效果。这个特性最经典的应用是做一个固定宽高比的占位容器。
/* 实现一个16:9的视频占位容器 */
.video-wrapper {
width: 100%;
padding-top: 56.25%; /* 9/16 = 0.5625，参照的是宽度 */
position: relative;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* em单位：间距随字号缩放 */
.btn {
font-size: 16px;
padding-top: 0.5em; /* = 8px */
padding-bottom: 0.5em;
}很多人第一次接触padding-bottom的百分比时会以为参照的是高度，结果发现间距和预期完全不符，根源就在这里。记住一句话：padding的百分比，不管上下左右，都看父元素宽度。
三、实战场景与常见坑点
在实际布局中，padding-top和padding-bottom的使用频率非常高。下面是几个典型场景。第一个是按钮和标签的垂直留白，通常不写固定高度，而是通过上下padding让内容自然撑开，这样文字换行或者字号变化时不会溢出。
.btn {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 24px;
padding-right: 24px;
background: #1677ff;
color: #fff;
border-radius: 4px;
}
/* 卡片内容留白 */
.card {
background: #fafafa;
padding-top: 24px;
padding-bottom: 24px;
}第二个场景是导航栏，通过增大padding-bottom可以扩大可点击区域，提升移动端的触控体验。第三个场景是图文排版中段落之间的呼吸感，给段落统一设置padding-bottom可以形成稳定的阅读节奏。
使用时还有几个坑需要避开。其一，行内元素（非替换元素）在垂直方向上的padding不会撑开行高，上下内边距会溢出到相邻行，此时需要改用display:inline-block或block才能正常生效。其二，padding区域会显示元素的背景色和背景图，如果只想加间距而不想留背景，应该考虑用margin。其三，块级元素上下相邻时的间距叠加问题属于margin的特性，padding不会叠加，因此在需要精确控制元素内部留白时，优先使用padding-top和padding-bottom是更稳妥的选择。
总结一下，掌握这两个属性的关键在于三点：理解盒模型中padding的位置和box-sizing的影响，记住百分比参照宽度这一特殊规则，并区分padding作用于元素内部而margin作用于元素外部。把这三点理清，上下间距的控制就会变得非常精准。
css padding-toppadding-bottom上下间距修改时间：2026-09-07 22:38:27