padding-left 设置内容与左边框的间距，使内容右移；padding-right 增加右侧空白，不影响左侧位置；两者独立控制盒模型中左右内边距，常用于布局留白。

在css中，padding-left 和 padding-right 都是用来设置元素内部填充的属性，但它们作用的方向不同，影响的是元素内容与左右边框之间的空白区域。

padding-left 是什么？

这个属性用来设置元素左边的内边距。也就是内容距离元素左边界的空间大小。

• 增大 padding-left 会让内容向右移动
• 它不会影响其他方向的间距
• 常用于文本左对齐时增加左侧留白，比如段落缩进或图标与文字间隔

padding-right 是什么？

这个属性控制元素右边的内边距。即内容距离元素右边界的空间。

• 增加 padding-right 会让内容左侧位置不变，右侧留出更多空白
• 在右对齐文本或需要右侧呼吸空间时很有用
• 比如按钮文字不紧贴右边框，看起来更舒适

实际例子对比

假设有一个宽度固定的 div：

稿定AI社区

在线AI创意灵感社区

60

查看详情

立即学习“前端免费学习笔记（深入）”；

div {
  width: 200px;
  background: #eee;
}

如果设置 padding-left: 20px;，文字会从左边空出20px开始显示。
如果设置 padding-right: 20px;，文字依然从左边开始，但在右边多出20px的空白，直到边框结束。

两者可以同时使用，也可以单独设定，互不影响。它们都属于盒模型中的“内边距”部分，会影响元素内容区的实际可用宽度（除非使用 box-sizing: border-box）。

基本上就这些，区别就在于方向：一个管左边空隙，一个管右边空隙。

以上就是在