在CSS盒模型中，padding-left与padding-right同属内边距属性，但分别作用于元素内容区与边框之间的左侧和右侧空白区域。理解二者的区别，是精准控制页面留白与组件间距的基础。虽然它们看起来只是方向不同，但在实际布局、书写模式切换以及响应式设计中，行为差异会直接影响渲染结果。
基础定义与语法差异
padding-left用于设置元素左内边距的宽度，也就是内容区域左侧与元素左边框（或无边框时的边界）之间的距离。与之对应，padding-right控制的是内容区域右侧到元素右边框的间距。从语法上看，二者均接受长度值（如px、em、rem）、百分比（相对于包含块的宽度）以及auto（在padding中通常等同于0）等取值。
下面是一段最简单的使用示例，我们为一个盒子分别指定不同的左右内边距：
.box {
width: 200px;
padding-left: 20px;
padding-right: 10px;
border: 1px solid #ccc;
}
上述代码中，盒子内容区左侧留出20像素空白，右侧留出10像素空白。若未显式声明某一侧，浏览器会使用默认值0，而不是从另一侧继承。这一点与margin的某些简写行为不同，在简写属性padding: 10px 20px;里，第一个值代表上下、第二个值代表左右，此时padding-left与padding-right会被同时设为20px。
值得注意的是，内边距会撑大元素的背景绘制区域。也就是说，padding-left增加后，元素的背景色或背景图会从边框内沿向左延伸覆盖该区域，而padding-right则向右延伸。这种特性在制作按钮或卡片阴影时尤为关键，因为点击区域和视觉边界都包含这部分空间。
书写模式下的方向语义变化
在常规水平书写模式（writing-mode: horizontal-tb，且direction: ltr）下，padding-left对应屏幕左侧，padding-right对应屏幕右侧。但当文档采用从右到左（RTL）语言如阿拉伯语，或通过CSS设置direction: rtl时，逻辑上的“左”与“右”会发生映射反转。
此时，padding-left在视觉上出现在元素右侧，而padding-right出现在左侧。这是因为CSS物理属性（left/right）始终绑定屏幕方向，而逻辑属性（padding-inline-start等）才绑定书写流向。如果开发者只使用物理属性并在多语言站点中混用方向，就容易出现间距错乱。以下代码演示了RTL下的表现：
<div style="direction: rtl; padding-left: 30px; padding-right: 5px; border: 1px solid #000;"> 文本内容 </div>
在该示例中，文本从右开始排列，30像素的左内边距实际位于视口右侧，导致右侧空白明显大于左侧。若希望无论语言方向如何都保持“起始边”间距一致，应改用逻辑属性padding-inline-start与padding-inline-end。不过物理属性在需要固定屏幕侧间距的场景（如绝对定位浮层）仍不可替代。
此外，在垂直书写模式（如writing-mode: vertical-rl）中，左右内边距会转化为垂直于文本流方向的间距，但其名称不变。这种抽象映射常令初学者困惑，建议在调试时借助浏览器开发者工具实时查看盒模型面板，确认物理padding的作用面。
实战布局中的常见误区与替代方案
很多开发者在制作导航条时，为了拉开菜单项距离，误用padding-left和padding-right而不统一，造成首项左边距与末项右边距不对称。更典型的错误是将本该用margin控制的外部间距写成了padding，使得背景色块异常扩大。内边距属于元素自身内部空间，不会影响其他盒子位置，而外边距才负责元素之间的距离。
举例来说，若希望两个输入框之间相隔12像素，应当给输入框设置margin-right，而不是给左侧输入框加padding-right。因为padding-right只会让输入框内部文本靠左，并不会把相邻元素推开。错误写法如下：
.input-a {
padding-right: 12px; /* 错误：仅内部留白 */
}
.input-b {
/* 紧挨着.input-a，无间距 */
}
正确方案是使用外边距或弹性布局的gap属性。同时，在响应式收缩时，可借助calc()动态计算左右内边距，避免内容触碰边界。例如移动端将padding-left与padding-right统一设为4vw，既保证安全区又简化维护。
最后，当使用box-sizing: border-box时，指定的宽度已包含左右内边距，此时增大padding-left会压缩内容区而非扩大元素总宽。这一机制能让左右间距调整更安全，但也要求开发者明确内容可用宽度，防止文本截断。综合来看，厘清padding-left与padding-right的物理边界、书写模式映射及与margin的职责划分，才能写出健壮的CSS布局。
CSSpadding_leftpadding_right修改时间：2026-08-13 16:06:29